{% extends "web/layout.html.twig" %}
{% block meta %}
    <title>Tienda - {{ category.name }} - {{ product.name }}</title>
    <meta name="description" content="{{ seo.getDescripcionByLang(app.request.locale) }}" />
    <!-- Schema.org markup -->
    <script type="application/ld+json">
        {
            "@context": "https://schema.org/",
            "@type": "Product",
            "name": "{{ product.name }}",
            "image": "{{ product.photos[0] is defined ? absolute_url(asset(product.photos[0].path)) : absolute_url(asset('/build/images/web/logo-desktop.png')) }}",
            "description": "{{ product.shortDescription|e('js') }}",
            "sku": "{{ product.sku }}",
            "brand": {
                "@type": "Brand",
                "name": "Justicialistas"
            },
            "offers": {
                "@type": "Offer",
                "url": "{{ url(app.request.attributes.get('_route'), { productSlug: product.slug}) }}",
                "priceCurrency": "ARS",
                "price": "{{ product.offerPrice is defined and product.offerPrice ? product.offerPrice : product.price }}",
                "itemCondition": "https://schema.org/NewCondition",
                "seller": {
                    "@type": "Organization",
                    "name": "Justicialistas"
                }
            }
        }
    </script>
    <!-- Twitter Card data -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="{{ seo.getTituloByLang(app.request.locale) }}">
    <meta name="twitter:description" content="{{ seo.getDescripcionByLang(app.request.locale) }}">
    <meta name="twitter:image" content="{{ absolute_url(asset('/build/images/web/logo-header-mobile.png') ) }}">
    <!-- Open Graph data -->
    <meta property="og:title" content="{{ seo.getTituloByLang(app.request.locale) }}" />
    <meta property="og:url" content="{{ url(app.request.attributes.get('_route') , { productSlug: product.slug}) }}">
    <meta name="og:image" content="{{ absolute_url(asset('/build/images/web/logo-header-mobile.png') ) }}">
    <meta property="og:description" content="{{ seo.getDescripcionByLang(app.request.locale) }}" />
    <meta property="og:site_name" content="Justicialistas" />
{% endblock %}
{% block mkt_events %}
    <script>
        window.addEventListener("load", function(event) {
            fbq('track', 'ViewContent', {
                "source": "web",
                "content_name": "{{ product.name }}",
                "content_ids": "[\"{{ product.sku }}\"]",
                "content_type": "product_group",
                "content_category": "{{ product.categories[0].name }}",
                "value": "{{ product.price | number_format(1, '.', '') }}",
                "currency": "ARS"
            });
        });
    </script>
{% endblock %}
{% block content %}
    <section class="product-item-container">
        <section class="breadcrumb-container">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-12 title-container">
                        <h6>
                            <a href="{{ path("web_store") }}">Tienda</a> >
                            <a href="{{ path('web_store', {'categorySlug': product.categories.first.slug }) }}">{{ category.name }}</a>
                            >
                            {{ product.name }}
                        </h6>
                    </div>
                </div>
                <div class="row d-flex d-lg-none">
                    <div class="col-12">
                        <h1>
                            {{ product.name }}
                            <i class="icon-share float-end"
                               data-title="Hola 👋, te comparto esto que te puede interesar: {{ product.name }}"
                               data-url="{{ app.request.getBaseUrl() }}/{{ product.categories|first.slug }}/{{ product.slug }}">
                            </i>
                        </h1>
                    </div>
                </div>
            </div>
        </section>
        <section class="product-info-container">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-12">
                        <div id="product-image-carousel" data-photos="{{ photos|json_encode }}"></div>
                    </div>
                    <div class="col-lg-5 offset-lg-1 col-12">
                        <div class="title-price-container">
                            <h1 class="d-none d-lg-block">
                                {{ product.name }}
                                <i class="icon-share float-end"
                                   data-title="Hola 👋, te comparto esto que te puede interesar: {{ product.name }}"
                                   data-url="{{ app.request.getBaseUrl() }}/{{ product.categories|first.slug }}/{{ product.slug }}">
                                </i>
                            </h1>
                            {% if product.offerPrice %}
                                <h5 class="price-line">$ {{ product.price | format_number }}</h5>
                                <h3>$ {{ product.offerPrice | format_number }}</h3>
                                <h4 class="pay-transfers">
                                    $  {{ (product.offerPrice - (product.offerPrice * discount_rate.value))| format_number }} {{ 'pay-transfers'|trans({}, 'item-product') }}
                                </h4>
                            {% else %}
                                <h3 class="pt-3 pt-lg-0">$ {{ product.price | format_number }}</h3>
                                <h4 class="pay-transfers">
                                    $ {{ (product.price - (product.price * discount_rate.value))| format_number }} {{ 'pay-transfers'|trans({}, 'item-product') }}
                                </h4>
                            {% endif %}
                        </div>
                        <div class="p-sdecription mt10">{{ (product.shortDescription is not null) ? product.shortDescription|raw : '' }}</div>
                        {% set variants = [] %}
                        {% for variant in product.productVariants %}
                            {% set variantData = {id: variant.id, name: (variant.size is not null? variant.size.name: variant.name), stock: variant.stock.available, description: variant.shortDescription } %}
                            {% set variants = variants|merge([variantData]) %}
                        {% endfor %}
                        <add-to-cart :product="{ id: {{ product.id }}, name: '{{ product.name|e("js") }}', price: {{ product.offerPrice is defined and product.offerPrice ? product.offerPrice : product.price }}, image: {{ product.photos[0] is defined ? ('"' ~ product.photos[0].path ~ '"') : 'null' }}, stock: {{ product.stock.available is defined ? ('"' ~ product.stock.available ~ '"') : 0 }}, variants: {{ variants|json_encode }}, quantity: 1 }">
                        </add-to-cart>
                        <div class="sizes-warning-container">
                            <h5>!{{ 'important'|trans({}, 'item-product') }}!</h5>
                            <p class="text">
                                Medite el pie antes de finalizar tu proceso de compra. Hacé click en
                                <strong>
                                    <a href="{{ asset("images/Talles-Justicialistas-1-2048x2048-1-1536x1536.jpg") }}" class="" target="_blank">
                                        {{ 'size-guide'|trans({}, 'home') }}
                                    </a>
                                </strong> y seguí las instrucciones. De esta manera evitamos
                                posibles cambios y devoluciones.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="description-container">
                            <div class="accordion accordion-flush" id="accordionDescriptionContainer">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingOne">
                                        <button class="accordion-button"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#flush-collapseOne"
                                                aria-expanded="true"
                                                aria-controls="flush-collapseOne">
                                            {{ 'description'|trans({}, 'item-product') }}
                                        </button>
                                    </h2>
                                    <div id="flush-collapseOne"
                                         class="accordion-collapse collapse show"
                                         aria-labelledby="flush-headingOne"
                                         data-bs-parent="#accordionDescriptionContainer">
                                        <div class="accordion-body">{{ (product.description is not null) ? product.description|raw : '' }}</div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingTwo">
                                        <button class="accordion-button collapsed"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#flush-collapseTwo"
                                                aria-expanded="false"
                                                aria-controls="flush-collapseTwo">
                                            {{ 'aditional-info'|trans({}, 'item-product') }}
                                        </button>
                                    </h2>
                                    <div id="flush-collapseTwo"
                                         class="accordion-collapse collapse"
                                         aria-labelledby="flush-headingTwo"
                                         data-bs-parent="#accordionDescriptionContainer">
                                        <div class="accordion-body">
                                            <table>
                                                <tr>
                                                    <th>Peso</th>
                                                    <td>{{ product.weight }} kg</td>
                                                </tr>
                                                <tr>
                                                    <th>Dimensiones de envío</th>
                                                    <td>
                                                        {{ product.length }} × {{ product.width }}
                                                        × {{ product.height }} cm
                                                    </td>
                                                </tr>
                                                {% if product.productType.value == 1 and product.productVariants[0].size is not null %}
                                                    <tr>
                                                        <th>Talle</th>
                                                        <td>
                                                            {% for productVariant in product.productVariants %}
                                                                {{ productVariant.size.name }}
                                                                {% if not loop.last %},{% endif %}
                                                            {% endfor %}
                                                        </td>
                                                    </tr>
                                                {% endif %}
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
    {% if relatedProducts|length > 0 %}
        <section class="related-products">
            <section class="highlited-products reveal">
                <div class="container">
                    <h1>{{ 'related.products'|trans({}, 'item-product') }}</h1>
                    <div class="row">
                        {% for product in relatedProducts %}
                            {{ include('web/blocks/product_item_block.html.twig', {product: product}) }}
                        {% endfor %}
                    </div>
                </div>
            </section>
        </section>
    {% endif %}
{% endblock %}