{% extends 'shop/shop.html.twig' %}

{% block title %}{{ product.title }}{% endblock %}

{% block content %}
<div class="col-12 col-lg-9">

    <hr class="line line--gray">

    {% set BreadCrumbsCat = product.categoryProducts[0].category %}
    {% set BreadCrumbsArr = [] %}

    {% set BreadCrumbsArr = get_breadcrumbs_array(BreadCrumbsCat) %}
    {% if BreadCrumbsCat.id > 1 %}
        {% set BreadCrumbsArr = BreadCrumbsArr|merge([{name: 'Publikace a e-shop', slug:''}]) %}
    {% endif %}

    {% if BreadCrumbsArr|length > 0 %}
        <ul class="shop-breadcrumbs">
            {% for BreadCrumbsItem in BreadCrumbsArr|reverse %}
                <li>
                    <a href="/{{ app.request.locale }}/publikace/{{ BreadCrumbsItem.slug }}" class="shop-breadcrumbs__link">{{ BreadCrumbsItem.name }}</a>
                </li>
            {% endfor %}
            <li>
                <a href="/{{ app.request.locale }}/publikace/{{  product.categoryProducts[0].category.slug }}" class="shop-breadcrumbs__link">{{  product.categoryProducts[0].category.name }}</a>
            </li>
            <li class="shop-breadcrumbs__current">
                {{ product.name }}
            </li>
        </ul>
    {% endif %}

    <div class="row mt-7">
        <div class="col-12 col-lg-4">
            {% if product.productVariants[0].productVariantUploadGroups|length > 0 %}
                {% if product.productVariants[0].productVariantUploadGroups[0].UploadGroup.upload|length > 0 %}
                    <img alt="Foto produktu" src="{{ asset(product.productVariants[0].productVariantUploadGroups[0].UploadGroup.upload[0].path) }}" class="product-info__image">
                {% else %}
                    <img class="product-info__image" src="{{ asset('build/img/mua-no-photo.jpg') }}" alt="Foto produktu">
                {% endif %}
            {% else %}
                <img class="product-info__image" src="{{ asset('build/img/mua-no-photo.jpg') }}" alt="Foto produktu">
            {% endif %}
        </div>
        <div class="col-12 col-lg-8">
            <div class="product-info">
                <h1 class="product-info__title">{{ product.name }}</h1>
                {% if author is not null %}
                    <div class="product-info__author">{{ author.data }}</div>
                {% endif %}
                {% if product_variant.availability.id != 4 and product_variant.availability.id != 5 %}
                    {% set price =  calculate_product_variant_price(product_variant, app.session.get("selectedCurrency"), "withVat", "withDiscount", 0) %}
                    {% set price_no_discount =  calculate_product_variant_price(product_variant, app.session.get("selectedCurrency"), "withVat", "withoutDiscount", 0) %}
                    {% set price_without_vat =  calculate_product_variant_price(product_variant, app.session.get("selectedCurrency"), "withoutVat", "withDiscount", 0) %}
                    <div class="product-info__our-price-box">
                            <div class="product-info__our-price">{{ price|round(0) }} {% trans %}mena{% endtrans %}</div>
                        {% if price < price_no_discount %}
                            <div class="product-info__sale">{% trans %}sleva{% endtrans %} {{ get_discount_amount(product_variant, 'percentage')|round(0, 'ceil') }}%</div>
                        {% endif %}
                    </div>
                    <div class="product-info__common-price">
                        {% trans %}cena.bez{% endtrans %}:
                        {{ price_without_vat|round(0) }} {% trans %}mena{% endtrans %}
                        {% if price < price_no_discount %}
                            <br>
                            {% trans %}bezna.cena{% endtrans %}:
                            <span>{{ price_no_discount|round(0) }} {% trans %}mena{% endtrans %}</span>
                        {% endif %}

                    </div>
                {% endif %}
                {% if product_variant.availability.id == 1 %}
                    <div class="product-info__availability">
                        {% trans %}dostupnost{% endtrans %}: <span class="product-info__availability-status product-info__availability-status--available">{{ product_variant.availability.name }}</span>
                    </div>
                {% elseif product_variant.availability.id == 2 or 5 or 6 %}
                    <div class="product-info__availability">
                        {% trans %}dostupnost{% endtrans %}: <span class="product-info__availability-status product-info__availability-status--outside">{{ product_variant.availability.name }}</span>
                    </div>
                {% elseif product_variant.availability.id == 3 or 4 %}
                    <div class="product-info__availability">
                        {% trans %}dostupnost{% endtrans %}: <span class="product-info__availability-status product-info__availability-status--unavailable">{{ product_variant.availability.name }}</span>
                    </div>
                {% else %}
                    <div class="product-info__availability">
                        {% trans %}dostupnost{% endtrans %}: <span class="product-info__availability-status product-info__availability-status--outside">{{ product_variant.availability.name }}</span>
                    </div>
                {% endif %}
                {% if product_variant.availability.id != 3 and product_variant.availability.id != 4 and product_variant.availability.id != 5 and product_variant.availability.id != 6 %}
                    <div class="product-info__shipping">
                        {% trans %}doruceni{% endtrans %}: <a href="javascript:void(0);" class="link js-modal-trigger" data-modal="shippingModal">{% trans %}moznosti.doruceni{% endtrans %}</a>
                    </div>
                {% endif %}

                <div class="product-info__buttons">
                    {# <a href="javascript:void(0);" onclick="openModal('cartModal');" class="product-info__to-cart">
                        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M2.16699 3.25H5.7781L6.48026 5.95833M6.48026 5.95833L8.93783 16.3403H19.7712L23.8337 5.95833H6.48026Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <ellipse cx="9.38954" cy="21.3056" rx="1.80556" ry="1.80556" fill="black"/>
                            <circle cx="19.3202" cy="21.3056" r="1.80556" fill="black"/>
                        </svg>
                        {% trans %}vlozit.kosiku{% endtrans %}
                    </a>#}
                    {% if product_variant.availability.id != 3 and product_variant.availability.id != 4 and product_variant.availability.id != 5 and product_variant.availability.id != 6 %}
                        <a href="javascript:void(0)"  class="btn btn-icon btn-primary addToCartBtn" data-variant_id="{{ product_variant.id }}">
                            <svg class="btn-icon__icon">
                                <use href="{{ asset('build/svg/_btn-icons.svg#cart') }}"></use>
                            </svg>
                            {% trans %}vlozit.kosiku{% endtrans %}
                        </a>
                    {% endif %}
                    {% if get_product_digital_version(product_variant) %}
                        <a href="{{ get_product_digital_version(product_variant) }}" class="btn btn-icon btn-outline" target="_blank">
                            <svg class="btn-icon__icon">
                                <use href="{{ asset('build/svg/_btn-icons.svg#digital') }}"></use>
                            </svg>
                            {% trans %}digit.knihovna{% endtrans %}
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-10">
        <div class="col-12 col-lg-7">
            <div class="product-description content">
                {{ product.textGeneral|raw }}
            </div>
            {# <div class="product-info__buttons">
                <a href="#" class="btn btn-icon btn-outline">
                    <svg class="btn-icon__icon">
                        <use href="{{ asset('build/svg/_btn-icons.svg#file') }}"></use>
                    </svg>
                    Stáhnout ukázku v PDF
                </a>
            </div> #}
        </div>
        <div class="col-12 offset-lg-1 col-lg-4 mt-7 mt-lg-0">
            <div class="product-parameters">
                {#
                    {% if product_variant.product.producer %}
                        <div class="mb-5">
                            <strong>{% trans %}nakladatelstvi{% endtrans %}:</strong>
                            <p>
                                {% if product_variant.product.producer.title %}
                                    {{ product_variant.product.producer.title }}
                                {% else %}
                                    {{ product_variant.product.producer.name }}
                                {% endif %}
                            </p>
                        </div>
                    {% endif %}
                #}
                {% for key,parameters in get_product_variant_parameters(product_variant) %}
                <div class="mb-5">
                    <strong>{{ key }}:</strong>
                    <p>
                        {% for parameter in parameters %}
                            {{ parameter }}<br>
                        {% endfor %}
                    </p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {#
    <div class="row mt-10">
        <div class="col-12">
            <h2 class="mb-5">{% trans %}souvis.publikace{% endtrans %}</h2>
            <div class="grid grid--2">
                {% for rel_product in related_products %}
                    {{ include('shop/product/_product_preview.html.twig', {product: rel_product}) }}
                {% endfor %}
            </div>
        </div>
    </div>
    #}
</div>

<dialog class="modal modal-box" id="shippingModal">
    <button type="button" class="modal__close js-modal-close">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.36396 7.77818L0 14.1421L1.41421 15.5564L7.77817 9.19239L14.1421 15.5564L15.5564 14.1421L9.19239 7.77818L15.5563 1.41421L14.1421 0L7.77817 6.36396L1.41421 4.63293e-06L0 1.41422L6.36396 7.77818Z" fill="black"/>
        </svg>
    </button>
    <h3 class="modal-box__heading">{% trans %}moznosti.doruceni{% endtrans %}</h3>
    <ul class="shipping-options">
        {% for transportation_method in transportation_methods %}
        <li>
            <a href="#" class="shipping-options__option is-active">
                <img src="{{ asset('build/svg/') ~transportation_method.icon}}" alt="Osobně" class="shipping-options__icon">

                <span class="shipping-options__title">{{transportation_method.name}}</span>
                {% if transportation_method.price == 0 %}
                    <span class="shipping-options__cost shipping-options__cost--free">{% trans %}zdarma{% endtrans %}</span>
                {% else %}
                    <span class="shipping-options__cost">{{ transportation_price(transportation_method, "withVat", app.session.get("selectedCurrency")) }} {% trans %}mena{% endtrans %}</span>
                {% endif %}
            </a>
        </li>
        {% endfor %}
    </ul>
</dialog>
{% endblock %}