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

{% block title %}{% endblock %}

{% block body %}
  <!-- breadcrumb area start -->
    <div class="breadcrumb-area">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap text-center">
                        <h2 class="breadcrumb-title">{% trans %}SPRINT & SPORTS | Détails du produit{% endtrans %}</h2>
                        <nav aria-label="breadcrumb">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">{% trans %}Accueil{% endtrans %}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{% trans %}Détails du produit{% endtrans %}</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <br>
            <br>
            <br>
        </div>
    </div>
    <!-- breadcrumb area end -->

    <!-- product details wrapper start -->
    <div class="product-details-main-wrapper pt-100 pb-sm-20 pt-sm-55">
        <div class="container">
            <div class="product-details-wrapper">
                <div class="row">
                    <div class="col-lg-5">
                        <div class="product-large-slider mb-20">
                            <div class="pro-large-img">
                                <img src="{{ product.image }}" alt="" />
                                <div class="img-view">
                                    <a class="img-popup" href="{{ product.image }}"><i class="fa fa-search"></i></a>
                                </div>
                            </div>
                            <div class="pro-large-img">
                                <img src="{{ product.image2 }}" alt=""/>
                                <div class="img-view">
                                    <a class="img-popup" href="{{ product.image2 }}"><i class="fa fa-search"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="pro-nav slick-arrow-style2 arrow3">
                            <div class="pro-nav-thumb"><img src="{{ product.image }}" alt="" /></div>
                            <div class="pro-nav-thumb"><img src="{{ product.image2 }}" alt="" /></div>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <div class="product__details__content mb-30 mt-md-40 mt-sm-40">
                            <h1>{{ product.label }}</h1>
                            {% if product.brandId != null %}
                                <h5>{{ product.brandId.label }}</h5>
                            {% endif %}

                            <div class="price-box">
                                {% if taux != null %}
                                    <span class="regular-price">{{ newPrice|number_format(0, '', ' ') }} <span class="currency">DZD</span></span>
                                    <span class="old-price"><del class="text-danger">{{ product.price |number_format(0, '', ' ')}}</del><span class="currency">{% trans %}DZD{% endtrans %}</span></span>
                                    <span class="taux-promo-details">-{{ taux }}%</span>
                                {% else %}
                                    <span class="regular-price">{{ product.price |number_format(0, '', ' ')}} <span class="currency">{% trans %}DZD{%endtrans %}</span></span>
                                {% endif %}

{#                                <span class="old-price"><del>6 000</del><span class="currency">{% trans %}DZD{% endtrans %}</span></span>#}
                            </div>

                            <hr>

                            {# <p class="mt-40 mb-40">other board in the K2 line-up pops harder or slashes heavier while offering the perfect balance of power and finesse. Bambooyah/Honeycomb Blended Core is the power-plant to this All Mountain Freestyle board blended with Carbon Ollie Bar and Carbon Web additives to</p> #}

                            <div class="quantity mb-20">
                                <h5>{% trans %}Quantité{% endtrans %}:</h5>
                                <div class="pro-qty" style="margin-right: 10px"><input type="text" id="qte" value="1"></div>
                            </div>
                            {% if criteria is not null %}
                                {% for key,array in criteria %}
                                    <div class="quantity mb-20">
                                        <h5>{{ key|trans }} :</h5>
                                        <select name="{{ key|lower }}" id="{{ key|lower }}-select">
                                            <option value="">-- {% trans %}Choisir une taille{% endtrans %} -- </option>
                                            {% for num,criterion in array %}
                                                <option value="{{ criterion.criterion }}" id="guide-{{ criterion.criterion }}" data-guide-from="{{ criterion.from }}" data-guide-to="{{ criterion.to }}">{{ criterion.criterion|upper }} </option>
                                            {% endfor %}
                                        </select>
                                        {% if key|lower == 'taille' %}
                                            <div class="guide-content">
                                                <p class="guide-title">{% trans %}Guide de taille{% endtrans %} :
                                                    <span class="guide">{% trans %}Choisissez une taille et ses dimensions seront calculées.{% endtrans %}</span></p>
                                            </div>
                                        {% endif %}

                                    </div>
                                {% endfor %}
                            {% endif %}
                            <div class="action_link mb-30">
                                <p class="text-danger err-msg" style="font-family: 'Poppins'; font-size: 12px; display: none;">Veuillez choisir une <span class="err-type">taille</span> valide</p>
                            </div>
                            <div class="action_link mb-30">
                                <a href="javascript:void(0)" class="add_btn" data-product="{{ product.id }}"><i class="pe-7s-cart"></i> {% trans %}Ajouter au panier{% endtrans %}</a>
                            </div>
                            {% if criteria is not null and criteria.Taille is defined %}
                                <a href="javascript:void(0)" id="toggle-guide">{% trans %}Afficher le guide des tailles{% endtrans %}</a>
                                <div class="guide-taille share-icon mb-20" style="display:none;">
                                    <table class="dataTable table-bordered" style="font-size: 14px; font-family: 'Poppins'; width: 40%">
                                        <thead>
                                        <tr>
                                            <th>{% trans %}Taille{% endtrans %}</th>
                                            <th>{% trans %}Dimensions{% endtrans %}</th>
                                        </tr>

                                        </thead>
                                        <tbody>
                                            {% for criterion in criteria.Taille %}
                                                <tr style="padding: 2px">
                                                    <td>{{ criterion.criterion }}</td>
                                                    <td>{{ criterion.from }} - {{ criterion.to }}</td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="share-icon mb-20">
                        <h5>{% trans %}partager sur : {% endtrans %}</h5>
                        <a class="bg-facebook" onclick="shareProductOnFacebook({{ product.id }}, '{{ product.image }}')" href="#"><i class="fa fa-facebook"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- product details wrapper end -->


    <script>
        function shareProductOnFacebook(productId, imagePath) {
            // replace "PRODUCT_URL" with the actual URL of the product you want to share
            var productUrl = "http://sprintsport.local/produit-details?id="+productId;

            // replace "IMAGE_URL" with the actual URL of the image you want to display
            var imageUrl = "http://sprintsport.local/"+imagePath;

            // construct the Facebook share URL
            var facebookShareUrl = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(productUrl) + "&p=" + encodeURIComponent(imageUrl)+ "&t=" + encodeURIComponent("TEST");
            ;

            // open the Facebook share dialog
            window.open(facebookShareUrl, "_blank");
        }

        function shareProductOnTweeter(productId){
            // replace "PRODUCT_URL" with the actual URL of the product you want to share
            var productUrl = "http://sprintsport.local/produit-details?id="+productId;

            // construct the Facebook share URL
            var facebookShareUrl = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(productUrl);

            // open the Facebook share dialog
            window.open(facebookShareUrl, "_blank");
        }

        function shareProductOnTweeter(productId){
            // replace "PRODUCT_URL" with the actual URL of the product you want to share
            var productUrl = "http://sprintsport.local/produit-details?id="+productId;

            // construct the Facebook share URL
            var facebookShareUrl = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(productUrl);

            // open the Facebook share dialog
            window.open(facebookShareUrl, "_blank");
        }

    </script>
{% endblock %}
{% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}