{% extends 'base.html.twig' %}
{% block body_class %}product-product-42{% endblock %}

{% block body %}
	<div class="header-content-title">
		<div style="background-image: url('{{ asset('bundles/frontend/') }}image/catalog/demo/banners/parallax.jpg'); background-position: 50% 78.1106%;" data-source-url="{{ asset('bundles/frontend/') }}image/catalog/demo/banners/parallax.jpg" class="parallex">
		</div>
	</div>

    <div id="product-product" class="container product-product">
        <ul class="breadcrumb">
            <li><a href="{{ path('homepage') }}"><i class="fa fa-home"></i>Acceuil </a> </li>
            <li><a href="{{ path('famille' , {'id': produit.FaId.cbmarq }) }}" >  {{ produit.FaId.intitule }}</a></li>
            {#{{ dump(produit.FaId.cbmarq)}}#}
            <li class="hidden"> </li>
            {#<li><a href="#">{{ produit.intitule }}</a></li>#}
        </ul>
        <div class="row">
            <div id="content" class="col-sm-12">
                <h1 class="page-title">{{ produit.intitule }} </h1>
                <!-- Product row START -->
                <div class="row">
                    <div class="product-block">

                        <div class="col-xs-12 col-sm-5 col-md-5 product-images">
                            <!-- Product Image thumbnails START -->
                            <div class="thumbnails">
                                <div class="product-image">
                                    <a class="thumbnail" title="aliquam quaerat voluptatem">
                                        <img style="width: 100%;height: 300px " src="{{ asset(artciles_dir ~ produit.imageprincipal ) }}" title="aliquam quaerat voluptatem" data-zoom-image="{{ asset(artciles_dir ~ produit.imageprincipal ) }}" alt="aliquam quaerat voluptatem" />
                                    </a>
                                </div>

                                <div class="additional-images-container">
                                    <div class="additional-images">
                                        {% for r in produit.images %}
                                            <div class="image-additional">
                                                <img style="width: 200px;height: 100px" src="{{ asset(artciles_dir ~ r ) }}" title="aliquam quaerat voluptatem" data-image="{{ asset(artciles_dir ~ r ) }}" data-zoom-image="{{ asset(artciles_dir ~ r ) }}" alt="aliquam quaerat voluptatem" />
                                            </div>
                                        {% endfor %}
                                        <div class="image-additional">
                                            <img style="width: 200px;height: 100px" src="{{ asset(artciles_dir ~ produit.imageprincipal ) }}" title="aliquam quaerat voluptatem" data-image="{{ asset(artciles_dir ~ produit.imageprincipal ) }}" data-zoom-image="{{ asset(artciles_dir ~ produit.imageprincipal ) }}" alt="aliquam quaerat voluptatem" />
                                        </div>
                                    </div>
                                </div>
                                <!-- Product Image thumbnails END -->
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-7 col-md-7 product-details">
                            <h1 class="product-name">{{ produit.intitule }} </h1>
                            <table class="product-info">

                                <tr>
                                    <td>Prix Unitaire</td>
                                    <td class="product-info-value"> <a href="#">{{ (article['put'])|localizedcurrency('TND')  }} </a> </td>
                                </tr>

                                {% if(article['remise']) %}
                                    <tr>
                                        <td>Remise :</td>
                                        <td class="product-info-value"> <a href="#">{{ article['remise'] }} %</a></td>
                                    </tr>
                                    <tr>
                                        <td>Période Remise :</td>
                                        <td class="product-info-value"> <a href="#">Du  {{ article['debutpromo']|date('d/m/Y')  }}  Au  {{ article['finpromo']|date('d/m/Y') }}</a></td>
                                    </tr>

                                    <tr>
                                        <td>Prix HT (avec remise)</td>
                                        <td class="product-info-value">  <a href="#">{{ (article['tht'])|localizedcurrency('TND')  }} </a></td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td>Prix HT </td>
                                        <td class="product-info-value">  <a href="#"> {{ (article['ht_sansremise'])|localizedcurrency('TND')  }} </a></td>
                                    </tr>
                                {% endif %}

                                <tr>
                                    <td>TVA:</td>
                                    <td class="product-info-value">  <a href="#"> {{ (article['tva']) }} % </a></td>
                                </tr>
                                <tr>
                                    <td>Prix TTC</td>
                                    <td class="product-info-value"> <a href="#"> {{ (article['ttc'])|localizedcurrency('TND')  }}</a></td>
                                </tr>
                            </table>

                            <!-- Product Options START -->
                            <div id="product" class="product-options">

                                <div class="form-group product-quantity">

                                    <button  onclick="addtocart({{ produit.cbmarq }})" type="button" id="button-cart" data-loading-text="Chargement..." class="btn  btn-primary  btn-lg btn-block" >
                                        Ajouter au panier </button>
                                </div>

                            </div>
                            <!-- AddThis Button END -->
                        </div>
                        <!-- Product option details END -->
                    </div>
                    <!-- Product nav Tabs START -->
                    <div class="col-sm-12 product-tabs">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab-description" data-toggle="tab">Description</a></li>
                            <li><a href="#tab-specification" data-toggle="tab">Ingrédients</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab-description">
                                {{ produit.description|raw() }}
                            </div>
                            <div class="tab-pane" id="tab-specification">
                                <div id="blog_latest_new_home" class="hb-animate-element bottom-to-top hb-in-viewport">
                                    <div class="container">
                                        <div class="block_content">
                                            <div class="row">
                                                <ul id="ttsmartblog-carousel" class="tt-carousel ttblog-content owl-carousel owl-theme">
                                                    {% for i in ing %}
                                                        <li>
                                                            <div class="blog-content">
                                                                <div class="ttblog_image_holder blog_image_holder left-block">

                                                                    <img class="image_thumb" src="{{ asset(artciles_dir ~ i.image ) }}" alt="Latest News" title="Latest News" />
                                                                    <div class="blog-hover"></div>

                                                                </div>
                                                                <div class="blog-caption blog-sub-content right-block">
                                                                    <div class="blog-inner">
                                                                        <span class="bloglinks">
                                                                        <a class="icon zoom" data-lightbox="example-set" href="{{ asset(artciles_dir ~ i.image ) }}" title="Ouvrir l'image">
                                                                        <i class="fa fa-search"></i>
                                                                        </a>
                                                                        </span>
                                                                        <h3 class="post_title"><a href="{{ asset(artciles_dir ~ i.image ) }}">{{ i.intitule }}</a></h3>
                                                                        <h5 class="post_title"><a href="{{ asset(artciles_dir ~ i.image ) }}">{{ i.description|raw }}</a></h5>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    {% endfor %}

                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                    <!-- Product tab END -->
                </div>
                <!-- Product row END -->
                <!-- Related products START -->

                <!-- Related products END -->
            </div>
            <!-- id content END -->
        </div>
    </div>
    <script src="{{ asset('bundles/frontend/')}}catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
    <script src="{{ asset('bundles/frontend/')}}catalog/view/javascript/TemplateTrip/jquery.elevatezoom.min.js" type="text/javascript"></script>
    <script type="text/javascript"><!--
        $(".additional-images").owlCarousel({
            items: 3,
            itemsDesktop: [1199,2],
            itemsDesktopSmall: [991,2],
            itemsTablet: [767,3],
            itemsMobile: [480,2],
            autoPlay: false,
            navigation: true,
            pagination: false
        });

        // Custom Navigation Events
        $(".additional-next").click(function(){
            $(".additional-images").trigger('owl.next');
        })
        $(".additional-prev").click(function(){
            $(".additional-images").trigger('owl.prev');
        })
        $(".additional-images-container .customNavigation").addClass('owl-navigation');
        $('select[name=\'recurring_id\'], input[name="quantity"]').change(function(){
            $.ajax({
                url: 'index.php?route=product/product/getRecurringDescription',
                type: 'post',
                data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
                dataType: 'json',
                beforeSend: function() {
                    $('#recurring-description').html('');
                },
                success: function(json) {
                    $('.alert-dismissible, .text-danger').remove();

                    if (json['success']) {
                        $('#recurring-description').html(json['success']);
                    }
                }
            });
        });
        function proelevateZoom(){
            jQuery(".product-image img").elevateZoom({
                zoomType: "inner",
                cursor: "crosshair",
                zoomWindowFadeIn: 500,
                zoomWindowFadeOut: 750
            });
        }
        proelevateZoom();
        $('.image-additional img').on(
            'click',
            (event) => {
                $('.product-image img').attr('src',$(event.target).data('image'));
                $('.selected').removeClass('selected');
                $(event.target).addClass('selected');
                $('.product-image img').data('zoom-image', $(event.currentTarget).data('zoom-image'));
                $('.product-image img').prop('src', $(event.currentTarget).data('image'));
                proelevateZoom();
            }

        );
        //--></script>
{% endblock %}