{% 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">
        <div class="wrapper_revert__for__mobile">
            <div class="sets__view__section sets__view__section__mobile">
                <div class="sets__view__section-img__wrapper">
                    <img src="{{ asset('media/products/modul/'~modul.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>
                            {{ shopAktionButton.text }}
                        </p>
                    </div>
                    <p>{{ modul.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 = getUserTypeModulPrices(app.user.id, modul.id) %}
                                            <div class="product__information-option d-flex justify-content-between align-items-center active"
                                                 data-id="{{ modul.id }}" data-price="{{ priceType }}" data-type="modul"
                                                 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="{{ modul.id }}" data-price="{{ modul.priceC }}"
                                                 data-type="modul"
                                                 data-name="dataPt">
                                                <h4 class="product__information-option-title">Lehrerexemplar </h4>
                                                <div class="ps-shop-price product__information-option-price"
                                                     data-price="{{ modul.priceC }}">CHF <span
                                                            class="value">{{ modul.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 modul.priceA2 %}
                                            <div>
                                                <div class="ps-shop-price priceColorA2 product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                                     data-price="{{ modul.priceA2 }}">CHF <span
                                                            class="value" data-price="{{ modul.priceA2 }}"
                                                            data-name="typeSt"
                                                            data-id="{{ modul.id }}"
                                                            data-type="modul">{{ modul.priceA2|number_format(2)|default }}</span>
                                                </div>
                                                <div class="priceA-del">
                                                    CHF <span>{{ modul.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="{{ modul.price }}">CHF <span
                                                        class="value" data-price="{{ modul.price }}" data-name="typeSt"
                                                        data-id="{{ modul.id }}"
                                                        data-type="modul">{{ modul.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="{{ modul.priceB }}">CHF <span
                                                    class="value" data-price="{{ modul.priceB }}" data-name="typeSt"
                                                    data-id="{{ modul.id }}"
                                                    data-type="modul">{{ modul.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 modul.priceA2 %}
                                        <div>
                                            <div class="ps-shop-price priceColorA2 product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                                 data-price="{{ modul.priceA2 }}">CHF <span
                                                        class="value" data-price="{{ modul.priceA2 }}"
                                                        data-name="typeSt"
                                                        data-id="{{ modul.id }}"
                                                        data-type="modul">{{ modul.priceA2|number_format(2)|default }}</span>
                                            </div>
                                            <div class="priceA-del">
                                                CHF <span>{{ modul.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="{{ modul.price }}">CHF <span
                                                    class="value" data-price="{{ modul.price }}" data-name="typeSt"
                                                    data-id="{{ modul.id }}"
                                                    data-type="modul">{{ modul.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">
            <h1>{{ modul.productTitle }}
                <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>
                        <div class="products__fast__access-modules-name">
                            <a href="{{ path('main_prufungsvorbereitung_index',{'examId':modul.examId,'lessonId':modul.lessonId}) }}">Komplettes
                                Set</a>
                        </div>
                        <div class="input__sections primary__input__section-dropdown"></div>
                    </li>
                    {% for modulx in productModul %}
                        {% if modulx.isEnabled == 1 %}
                            <li class="{% if modulx.id == modul.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>
                                <div class="input__sections primary__input__section-dropdown"></div>
                            </li>
                        {% endif %}
                    {% endfor %}
                    {% for extra in productExtra %}
                        {% if extra.isEnabled == 1 %}
                            <li>
                                <div class="products__fast__access-modules-name">
                                    <a href="{{ path('main_prufungsvorbereitung_extra',{'product':productId,'extra':extra.id}) }}">{{ extra.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="{{ asset('media/products/modul/'~modul.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>
                        {{ shopAktionButton.text }}
                    </p>
                </div>
                <p>{{ modul.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 = getUserTypeModulPrices(app.user.id, modul.id) %}
                                        <div class="product__information-option d-flex justify-content-between align-items-center active"
                                             data-id="{{ modul.id }}" data-price="{{ priceType }}" data-type="modul"
                                             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="{{ modul.id }}" data-price="{{ modul.priceC }}" data-type="modul"
                                             data-name="dataPt">
                                            <h4 class="product__information-option-title">Lehrerexemplar </h4>
                                            <div class="ps-shop-price product__information-option-price"
                                                 data-price="{{ modul.priceC }}">CHF <span
                                                        class="value">{{ modul.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 modul.priceA2 %}
                                        <div>
                                            <div class="ps-shop-price priceColorA2 product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                                 data-price="{{ modul.priceA2 }}">CHF <span
                                                        class="value" data-price="{{ modul.priceA2 }}"
                                                        data-name="typeSt"
                                                        data-id="{{ modul.id }}"
                                                        data-type="modul">{{ modul.priceA2|number_format(2)|default }}</span>
                                            </div>
                                            <div class="priceA-del">
                                                CHF <span>{{ modul.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="{{ modul.price }}">CHF <span
                                                    class="value" data-price="{{ modul.price }}" data-name="typeSt"
                                                    data-id="{{ modul.id }}"
                                                    data-type="modul">{{ modul.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="{{ modul.priceB }}">CHF <span
                                                class="value" data-price="{{ modul.priceB }}" data-name="typeSt"
                                                data-id="{{ modul.id }}"
                                                data-type="modul">{{ modul.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 modul.priceA2 %}
                                    <div>
                                        <div class="ps-shop-price priceColorA2 product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                             data-price="{{ modul.priceA2 }}">CHF <span
                                                    class="value" data-price="{{ modul.priceA2 }}"
                                                    data-name="typeSt"
                                                    data-id="{{ modul.id }}"
                                                    data-type="modul">{{ modul.priceA2|number_format(2)|default }}</span>
                                        </div>
                                        <div class="priceA-del">
                                            CHF <span>{{ modul.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="{{ modul.price }}">CHF <span
                                                class="value" data-price="{{ modul.price }}" data-name="typeSt"
                                                data-id="{{ modul.id }}"
                                                data-type="modul">{{ modul.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;
            });
        });

        // 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");
                    }
                })
            })


        })
    </script>
{% endblock %}