{% extends 'ecom.html.twig' %}

{% block content %}
    {{ include('webshop/__categories.html.twig') }}
    <div class="product-page" data-id="{{ product.id }}">
        <div>
            <div class="f-carousel" id="myCarousel">
                {% for index, imageItem in product.images %}
                    {% if imageItem.imagePath is not empty %}
                        <div class="f-carousel__slide" data-thumb-src="{{ asset(imageItem.imagePath) }}">
                            <a href="{{ asset(imageItem.imagePath) }}" data-fancybox="gallery">
                                <img width="640" height="480" alt="" data-lazy-src="{{ asset(imageItem.imagePath) }}"/>
                            </a>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        <div>
            <h1 class="page__title page__title--h1 title">
                {{ product.name }}
            </h1>
            <p class="info info--price">
                {% if product.priceEcomOriginal is not empty and product.priceEcomOriginal > 0 %}
                    <span class="price-text price-text--original">{{ product.priceEcomOriginal }} {{ 'kr' | trans }}</span>
                    <span class="price-text price-text--discount">{{ product.priceEcomIncTax }} {{ 'kr' | trans }}</span>
                {% else %}
                    {{ product.priceEcomIncTax }} {{ 'kr' | trans }}
                {% endif %}
            </p>
            <p class="info">{{ 'SKU' | trans }}: {{ product.sku }}</p>
            <hr/>
            <div class="text-content">
                {{ product.description2 | raw }}
                {% if product.fabric is not empty %}
                    <p>{{ product.fabric }}</p>
                {% endif %}
                {% if product.washingInstructions is not empty %}
                    <p>{{ product.washingInstructions }}</p>
                {% endif %}
                <form class="form" style="margin-top: 15px;" method="post">
                    {% if subProducts | length > 0 %}
                        <div class="form-group">
                            <label>{{ 'Size' | trans }}</label>
                            <select class="form-control" name="sub_product_id">
                                {% for subProduct in subProducts %}
                                    <option value="{{ subProduct.id }}">{{ subProduct.name is not empty ? subProduct.name : subProduct.size }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    {% endif %}
                    {% for addOnProduct in addOnProducts %}
                        {% if addOnProduct.addOnProductType == constant('App\\Entity\\Product::ADDON_PRODUCT_TYPE_INPUT') %}
                            <div class="form-group mb-3">
                                <label>{{ addOnProduct.name }}
                                    (+{{ addOnProduct.priceEcomIncTax }} {{ 'kr' | trans }})</label>
                                <input type="text"
                                       class="form-control {{ addOnProduct.addOnInputAllLetterInputCapital ? 'text-uppercase' : '' }}"
                                       maxlength="{{ addOnProduct.addOnInputMaxLength }}"
                                       placeholder="{{ 'Add your add on text' | trans }}"
                                       name="addOnInput[{{ addOnProduct.id }}]"/>
                            </div>
                        {% elseif addOnProduct.addOnProductType == constant('App\\Entity\\Product::ADDON_PRODUCT_TYPE_OPTION') %}
                            <div class="form-check">
                                <input class="form-check-input" name="addOnProduct[]" type="checkbox"
                                       value="{{ addOnProduct.id }}" id="addOn{{ addOnProduct.id }}">
                                <label class="form-check-label" for="addOn{{ addOnProduct.id }}"
                                       style="font-weight: 400; text-transform: capitalize">
                                    {{ addOnProduct.name }} (+{{ addOnProduct.priceEcomIncTax }} {{ 'kr' | trans }})
                                </label>
                            </div>
                        {% endif %}
                    {% endfor %}
                    <div class="form-group form-group--with-submit">
                        <input type="number" class="form-control" value="1" name="quantity" min="1"/>
                        <button type="submit" class="btn btn-warning">{{ 'Add to cart' | trans }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}
{% block custom_stylesheets %}
    <link rel="stylesheet" href="{{ asset('webshop/plugins/fancybox/fancybox.css') }}"/>
    <link rel="stylesheet" href="{{ asset('webshop/plugins/fancybox/carousel.css') }}"/>
    <link rel="stylesheet" href="{{ asset('webshop/plugins/fancybox/carousel.thumbs.css') }}"/>
{% endblock %}
{% block custom_javascripts %}
    <script src="{{ asset('webshop/plugins/fancybox/fancybox.umd.js') }}"></script>
    <script src="{{ asset('webshop/plugins/fancybox/carousel.umd.js') }}"></script>
    <script src="{{ asset('webshop/plugins/fancybox/carousel.thumbs.umd.js') }}"></script>
    <script>
        // https://codepen.io/mohan-aiyer/pen/bGxrpoN?editors=1111
        const container = document.getElementById("myCarousel");
        const options = {Dots: false};

        new Carousel(container, options, {Thumbs});

        Fancybox.bind("[data-fancybox]", {
            // Your custom options
        });
    </script>
{% endblock %}