{% extends 'main_base.html.twig' %}
{% block title %}Simulationsprüfüng{% endblock %}
{% block description %}Simulationsprüfüng{% 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 ">
        <div class="wrapper_revert__for__mobile">
            <div class="sets__view__section sets__view__section__mobile">
                <div class="sets__view__section-img__wrapper">
                    <img src="https://system.yondy.ch/public/media/laden/{{ laden.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 product__information__wrapper__mobile">
                <div class="product__information">
                    <div class="circle d-flex justify-content-center align-items-center ">
                        <p>
                            {{ shop2AktionButton.text }}
                        </p>
                    </div>
                    <h1>{{ laden.title }}</h1>
                    <p>{{ laden.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 == 3 %}
                                            {% set priceType = getUserTypeLadenPrices(app.user.id, laden.id) %}
                                            <div class="product__information-option d-flex justify-content-between align-items-center active"
                                                 data-id="{{ laden.id }}" data-price="{{ priceType }}" data-type="laden"
                                                 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="{{ laden.id }}" data-price="{{ laden.priceC }}"
                                                 data-type="laden"
                                                 data-name="dataPt">
                                                <h4 class="product__information-option-title">Lehrerexemplar </h4>
                                                <div class="ps-shop-price product__information-option-price"
                                                     data-price="{{ laden.priceC }}">CHF <span
                                                            class="value">{{ laden.priceC|number_format(2)|default }}</span>
                                                </div>
                                            </div>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            </div>
                            <div class="product__information-products__completed__btns d-flex align-items-end ">
                                {% if app.user %}
                                    {% if app.user.userTyped.id == 1 %}
                                        {% if laden.priceA2 %}
                                            <div>
                                                <div class="ps-shop-price priceColorA2 product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                                     data-price="{{ laden.priceA2 }}">CHF <span
                                                            class="value" data-price="{{ laden.priceA2 }}" data-name="typeSt"
                                                            data-id="{{ laden.id }}"
                                                            data-type="laden">{{ laden.priceA2|number_format(2)|default }}</span>
                                                </div>
                                                <div class="priceA-del">CHF <span>{{ laden.price|number_format(2)|default }}</span></div>
                                            </div>
                                        {% else %}
                                            <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                                 data-price="{{ laden.price }}">CHF <span
                                                        class="value" data-price="{{ laden.price }}" data-name="typeSt"
                                                        data-id="{{ laden.id }}"
                                                        data-type="laden">{{ laden.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="{{ laden.priceB }}">CHF <span
                                                    class="value" data-price="{{ laden.priceB }}" data-name="typeSt"
                                                    data-id="{{ laden.id }}"
                                                    data-type="laden">{{ laden.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 laden.priceA2 %}
                                        <div>
                                            <div class="ps-shop-price priceColorA2 product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                                 data-price="{{ laden.priceA2 }}">CHF <span
                                                        class="value" data-price="{{ laden.priceA2 }}" data-name="typeSt"
                                                        data-id="{{ laden.id }}"
                                                        data-type="laden">{{ laden.priceA2|number_format(2)|default }}</span>
                                            </div>
                                            <div class="priceA-del">CHF <span>{{ laden.price|number_format(2)|default }}</span></div>
                                        </div>
                                    {% else %}
                                        <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                             data-price="{{ laden.price }}">CHF <span
                                                    class="value" data-price="{{ laden.price }}" data-name="typeSt"
                                                    data-id="{{ laden.id }}"
                                                    data-type="laden">{{ laden.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-modules__and__prices products__fast__access h1">
            <ul class="products__fast__access-modules ps-0">
            </ul>
            <h1 style="width: 60%;">{{ laden.title }}
                <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">
                    <li class="active">
                        <div class="products__fast__access-modules-name">
                            Komplettes Set
                        </div>
                        <div class="input__sections primary__input__section-dropdown"></div>
                    </li>
                    {% for modul in ladenModul %}
                        {% if modul.isEnabled == 1 %}
                            <li>
                                <div class="products__fast__access-modules-name">
                                    <a href="{{ path('main_simulationsprufung_modul',{'product':modul.laden.id,'modul':modul.id}) }}">{{ modul.text|striptags }}</a>
                                </div>
                                <div class="input__sections primary__input__section-dropdown"></div>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
        </div>


        <div class="sets__view__section sets__view__section__desktop">
            <div class="sets__view__section-img__wrapper">
                <img src="https://system.yondy.ch/public/media/laden/{{ laden.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 product__information__wrapper__desktop">

            <div class="product__information">
                <div class="circle d-flex justify-content-center align-items-center ">
                    <p>
                        {{ shop2AktionButton.text }}
                    </p>
                </div>
                <h1>{{ laden.title }}</h1>
                <p>{{ laden.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 == 3 %}
                                        {% set priceType = getUserTypeLadenPrices(app.user.id, laden.id) %}
                                        <div class="product__information-option d-flex justify-content-between align-items-center active"
                                             data-id="{{ laden.id }}" data-price="{{ priceType }}" data-type="laden"
                                             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="{{ laden.id }}" data-price="{{ laden.priceC }}" data-type="laden"
                                             data-name="dataPt">
                                            <h4 class="product__information-option-title">Lehrerexemplar </h4>
                                            <div class="ps-shop-price product__information-option-price"
                                                 data-price="{{ laden.priceC }}">CHF <span
                                                        class="value">{{ laden.priceC|number_format(2)|default }}</span>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endif %}
                            </div>
                        </div>
                        <div class="product__information-products__completed__btns d-flex align-items-end ">
                            {% if app.user %}
                                {% if app.user.userTyped.id == 1 %}
                                    {% if laden.priceA2 %}
                                        <div>
                                            <div class="ps-shop-price priceColorA2 product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                                 data-price="{{ laden.priceA2 }}">CHF <span
                                                        class="value" data-price="{{ laden.priceA2 }}" data-name="typeSt"
                                                        data-id="{{ laden.id }}"
                                                        data-type="laden">{{ laden.priceA2|number_format(2)|default }}</span>
                                            </div>
                                            <div class="priceA-del">CHF <span>{{ laden.price|number_format(2)|default }}</span></div>
                                        </div>
                                    {% else %}
                                        <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                             data-price="{{ laden.price }}">CHF <span
                                                    class="value" data-price="{{ laden.price }}" data-name="typeSt"
                                                    data-id="{{ laden.id }}"
                                                    data-type="laden">{{ laden.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="{{ laden.priceB }}">CHF <span
                                                class="value" data-price="{{ laden.priceB }}" data-name="typeSt"
                                                data-id="{{ laden.id }}"
                                                data-type="laden">{{ laden.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 laden.priceA2 %}
                                    <div>
                                        <div class="ps-shop-price priceColorA2 product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                             data-price="{{ laden.priceA2 }}">CHF <span
                                                    class="value" data-price="{{ laden.priceA2 }}" data-name="typeSt"
                                                    data-id="{{ laden.id }}"
                                                    data-type="laden">{{ laden.priceA2|number_format(2)|default }}</span>
                                        </div>
                                        <div class="priceA-del">CHF <span>{{ laden.price|number_format(2)|default }}</span></div>
                                    </div>
                                {% else %}
                                    <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                         data-price="{{ laden.price }}">CHF <span
                                                class="value" data-price="{{ laden.price }}" data-name="typeSt"
                                                data-id="{{ laden.id }}"
                                                data-type="laden">{{ laden.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>
{% endblock %}
{% block pageScript %}
    <script>
        let productInformationWrapper = $(".product__information__wrapper__mobile").height();
        var windowWidth = $(window).width();
        if (windowWidth < 1050) {
            $(".sets__view__section__mobile").css("height", "calc(100% - " + productInformationWrapper + "px - 80px)");
        }


        $(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;
            });
        });

        // Full Screen
        const fullScreenBtn = $(".swiper-button-full__screen button");
        const fullScreenWrap = $(".swiper-button-full__screen");
        const productsSetSection = $(".products-set__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 setsViewVertical = $(".sets__view__section__mobile .sets__view__section-img__wrapper");
        const setsViewDesktop = $(".products-set__section .sets__view__section__desktop .sets__view__section-img__wrapper");
        const setsViewHorizontal = $(".sets__view__section__mobile__fullscreen");
        const setsViewDesk = $(".sets__view__section__desktop");
        const setsViewMobile = $(".sets__view__section__mobile");
        const setsViewMobileWrap = $(".wrapper_revert__for__mobile");

        fullScreenBtn.click(function () {
            var windowHeight = $(window).width();

            $(book).addClass("active");
            fullScreenBtn.css({
                "opacity": "0",
                "pointer-events": "none"
            });
            gsap.set(yellowBallon, {
                transformOrigin: 'left'
            });
            gsap.to(yellowBallon, {
                scale: 2
            });
            $(header).css({
                "opacity": "0",
                "pointer-events": "none"
            });
            $(productInformation).css({
                "opacity": "0",
                "pointer-events": "none"
            });
            $(productFastAccess).css({
                "opacity": "0",
                "pointer-events": "none"
            });

            $(setsViewMobile).css({
                "margin-bottom": "0px",
            })
            setTimeout(function () {

                $(fullScreenWrap).css({
                    "display": "none",
                });
                $(productsSetSection).css({
                    "position": "static",
                });

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

                $(productsSetSection).css({
                    "margin": "0",
                });
                $(header).css({
                    "display": "none",
                    "height": "100vh"
                });
                $(footer).css({
                    "display": "none",
                });
            }, 300)
            $(setsViewDesktop).css({
                "opacity": "0",
                "transform": "scale(1.3)"
            });
            $(setsViewVertical).css({
                "opacity": "0",
                "transform": "scale(1.3)"
            });

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

                $(setsViewVertical).css({
                    "opacity": "1",
                });

            }, 500)
            if (warningModals) {
                $(warningModals).css({
                    "opacity": "0",
                    "pointer-events": "none"
                });
            }

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

            $("body").css({
                "overflow-x": "unset",
            });
            setTimeout(function () {
                $(closeBtn).css({
                    "opacity": "1",
                    "pointer-events": "auto"
                });
            }, 600);

            $(".sets__view__section__mobile").addClass("active");
            setTimeout(function () {
                $(".sets__view__section__mobile").css({"height": "auto"})
                $(".products-set__section .wrapper_revert__for__mobile").css({"justify-content": "center"})
                $(".product__information__wrapper").css({"display": "none"})
                $("html").css({"overflow": "hidden"});
            }, 200)
            setTimeout(function () {
                $(".sets__view__section__mobile").removeClass("active")
            }, 500)


            /*if(windowHeight < 800) {
                $(".sets__view__section__mobile").css({"height" : "100%"});
                
                fullScreenModeActive();
            }*/


            scrollToTop();
        });

        closeBtn.click(function () {
            book.removeClass("active");
            fullScreenBtn.css({
                "opacity": "1",
                "pointer-events": "auto"
            });

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

            header.css({
                "opacity": "1",
                "pointer-events": "auto"
            });
            productInformation.css({
                "opacity": "1",
                "pointer-events": "auto"
            });
            productFastAccess.css({
                "opacity": "1",
                "pointer-events": "auto"
            });

            setsViewMobile.css({
                "margin-bottom": "",
            })

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


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

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

            $(header).css({
                "display": "",
                "height": ""
            });
            $(footer).css({
                "display": "",
            });
            $(setsViewDesktop).css({
                "opacity": "0",
            });

            $(setsViewVertical).css({
                "opacity": "0",
                "transform": ""
            });

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

                $(setsViewVertical).css({
                    "opacity": "1",
                });
            }, 500)

            if (warningModals.length) {
                warningModals.css({
                    "opacity": "1",
                    "pointer-events": "auto"
                });
            }

            closeBtn.css({
                "opacity": "0",
                "pointer-events": "none"
            });

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


            $("body").css({
                "overflow-x": "",
            });

            $(".sets__view__section__mobile").addClass("active");

            setTimeout(function () {
                $(".sets__view__section__mobile").css({"height": ""})
                $(".products-set__section .wrapper_revert__for__mobile").css({"justify-content": ""})
                $(".product__information__wrapper").css({"display": ""})
            }, 200)

            setTimeout(function () {
                $(".sets__view__section__mobile").removeClass("active")
            }, 500)


            /*$(setsViewDesk).css({"display" : ""})
            $(setsViewMobileWrap).css({"display" : ""})
            fullScreenModeDisable();*/

        })


    </script>
{% endblock %}