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

{% block content %}
    {{ include('webshop/template/nakata/__filter_categories.html.twig') }}
    <div class="product-page" data-id="{{ product.id }}">
        <div class="product-page-carousel">
            <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 class="product-page-info">
            <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">
                {% set allSubOutStock = subProducts | length > 0 and (subProducts | filter(s => not s.outStock) | length) == 0 %}
                {% if allSubOutStock or (product.outStock and subProducts | length == 0) %}
                    <p class="out-stock-label"><strong>Slut i lager</strong></p>
                {% else %}
                <form class="form" style="margin-top: 15px;" method="post">
                    {% if subProducts | length > 0 %}
                        <div class="form-group">
                            <label>{{ 'Size' | trans }}</label>
                            <div class="size-wrap">
                                {% for subProduct in subProducts %}
                                    <div>
                                        <input type="radio" class="btn-check" name="sub_product_id"
                                               value="{{ subProduct.id }}" id="sub_product_id{{ subProduct.id }}"
                                               autocomplete="off" {% if subProduct.outStock %}disabled{% endif %}/>
                                        <label class="btn btn-outline-dark {% if subProduct.outStock %}disabled{% endif %}"
                                               for="sub_product_id{{ subProduct.id }}">
                                            {{ subProduct.name is not empty ? subProduct.name : subProduct.size }}
                                            {% if subProduct.outStock %}<span class="out-stock-label">Slut i lager</span>{% endif %}
                                        </label>
                                    </div>
                                {% endfor %}
                            </div>
                        </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">
                        <label for="form-quantity">{{ 'Quantity' | trans }}</label>
                        <input type="number" class="form-control" value="1" name="quantity" id="form-quantity" min="1"/>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-dark" style="width: 100%">{{ 'Add to cart' | trans }}</button>
                    </div>
                </form>
                {% endif %}
                <div>
                {{ 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 %}
                </div>
            </div>
        </div>
    </div>
    {% if relatedProducts | length > 0 %}
        <div class="category-page">
            <h2 class="page__title page__title--h1 page__title--related">
                <hr/>
                <span>{{ product.relatedProductText is not empty ? product.relatedProductText : 'Relaterade produkter' }}</span>
            </h2>
            <div class="category-page__products">
                {% for relatedProduct in relatedProducts %}
                    {{ include('webshop/__product_item.html.twig', {'product': relatedProduct}) }}
                {% else %}
                    {{ 'No items' | trans }}
                {% endfor %}
            </div>
        </div>
    {% endif %}
{% 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') }}"/>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
    <style>
        .select2-container .select2-selection--single {
            height: 34px;
            margin-bottom: 0;
            border: 1px solid #ced4da;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            height: 34px;
            line-height: 24px;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 34px;
            margin-bottom: 0;
        }
    </style>
{% 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 src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.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
        });
        // In your Javascript (external .js resource or <script> tag)
        $(document).ready(function () {
            $('.sizelist').select2({
                minimumResultsForSearch: Infinity
            });
        });
    </script>
{% endblock %}