{% extends 'base.html.twig' %}
{% block body %}
    <div class="content-top">
        {{ render(controller('FrontendBundle:Default:slide')) }}
    </div>

    <div class="tthome">
        <div id="content" class="col-sm-12 left-column">

            <div class="tt-category-featured hb-animate-element bottom-to-top">
                <div class="container">
                    <div class="box-heading">
                        <h3>Ce qui vous convient !</h3>
                        <div class="ttdesc">Test en ligne</div>
                    </div>
                    <div class="ttfcat-items">
                        <div class="container">
                            <div class="panel panel-default">
                                <br>
                                <div class="panel-body">
                                    <div class="stepper">
                                        <ul class="nav nav-tabs" role="tablist" style="position: relative;width:100%">
                                            <li role="presentation" class="active">
                                                <a class="persistant-disabled" href="#stepper-step-1" data-toggle="tab" aria-controls="stepper-step-1" role="tab" title="Step 1">
                                                    <span class="round-tab">1</span>
                                                </a>
                                            </li>
                                            <li role="presentation" class="disabled">
                                                <a class="persistant-disabled" href="#stepper-step-2" data-toggle="tab" aria-controls="stepper-step-2" role="tab" title="Step 2">
                                                    <span class="round-tab">2</span>
                                                </a>
                                            </li>
                                            <li role="presentation" class="disabled">
                                                <a class="persistant-disabled" href="#stepper-step-3" data-toggle="tab" aria-controls="stepper-step-3" role="tab" title="Step 3">
                                                    <span class="round-tab">3</span>
                                                </a>
                                            </li>
                                            <li role="presentation" class="disabled">
                                                <a class="persistant-disabled" href="#stepper-step-4" data-toggle="tab" aria-controls="stepper-step-4" role="tab" title="Complete">
                                                    <span class="round-tab">4</span>
                                                </a>
                                            </li>
                                        </ul>
                                        <form role="form">
                                            <div class="tab-content">
                                                <div class="tab-pane fade in active" role="tabpanel" id="stepper-step-1">
                                                    <h3 class ="h2">1. Select Payment Type</h3>
                                                    <p>This is step 1</p>
                                                    <ul class="list-inline pull-right">
                                                        <li>
                                                            <a class="btn btn-primary next-step">Next</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="tab-pane fade" role="tabpanel" id="stepper-step-2">
                                                    <h3 class ="h2">2. Enter Payment Information</h3>
                                                    <p>This is step 2</p>
                                                    <ul class="list-inline pull-right">
                                                        <li>
                                                            <a class="btn btn-default prev-step">Back</a>
                                                        </li>
                                                        <li>
                                                            <a class="btn btn-primary next-step">Next</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="tab-pane fade" role="tabpanel" id="stepper-step-3">
                                                    <h3 class="hs">3. Review and Submit Payment</h3>
                                                    <p>This is step 3</p>
                                                    <ul class="list-inline pull-right">
                                                        <li>
                                                            <a class="btn btn-default prev-step">Back</a>
                                                        </li>
                                                        <li>
                                                            <a class="btn btn-default cancel-stepper">Cancel Payment</a>
                                                        </li>
                                                        <li>
                                                            <a class="btn btn-primary next-step">Submit Payment</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="tab-pane fade" role="tabpanel" id="stepper-step-4">
                                                    <h3>4. All done!</h3>
                                                    <p>You have successfully completed all steps.</p>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tt-category-featured hb-animate-element bottom-to-top">
                <div class="container">
                        <div class="box-heading">
                            <h3>Nos gammes</h3>
                            <div class="ttdesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, quis quis nostrud exercitation ullamco laboris</div>
                        </div>
                    <div class="ttfcat-items">
                        <div class="customNavigation">
                            <a class="btn prev ttfcat_prev"></a>
                            <a class="btn next ttfcat_next"></a>
                        </div>
                        <div class="row">
                            <div class="category-feature tt-carousel">

                            {%  for cat in categories_articles %}
                                <div class="item">
                                    <div class="content">
                                        <div class="image">
                                            <a href="{{ path('famille',{'id': cat.cbmarq}) }}">
                                                <img src="{{ asset(artciles_dir ~ cat.Image) }}" alt="{{ cat.Intitule }}" title="{{ cat.Intitule }}" class="img-responsive" />
                                            </a>
                                        </div>
                                        <div class="caption">
                                            <div class="cat-title">
                                                <h4><a href="{{ path('famille',{'id': cat.cbmarq }) }}">{{ cat.Intitule }}</a></h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ttproduct-main hb-animate-element bottom-to-top">
                <div class="container">
                    <div class="TTProduct-Tab TT-product-carousel products-list">
                        <div class="tthometab">
                            <div class="box-heading tthometab-title">
                                <h3>Nos Articles</h3>
                                <div class="ttdesc">Nous vous proposons une large gamme de produits de soins et de beauté Bio et naturels .</div>
                            </div>
                            <div id="TTPTab-0" class="tab-box-heading">
                                <ul class="nav nav-tabs">
                                    <li><a href="#tab-0" data-toggle="tab">Tout</a></li>
                                    {%  for cat in categories_articles %}
                                    <li><a href="#tab-{{ cat.cbmarq }}" data-toggle="tab">{{ cat.Intitule }}</a></li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        <div class="tab-content">

                            <div id="tab-0" class="tab-pane row">
                                <div class="products-carousel">
                                    {%  for art in  articles %}
                                    <div class="product-layouts">
                                        <div class="product-thumb transition" >
                                                <div class="image" >
                                                    <a href="{{ path('product',{ 'id': art["idart"] }) }}" style="height: 300px;">
                                                        <img class="image_thumb" src="{{ asset(artciles_dir ~ art['image'] ) }}" title="{{ art['article'] }}" alt="{{ art['article'] }}"  style="height: 100%;" />
                                                        <img class="image_thumb_swap" src="{{ asset(artciles_dir ~ art['image'] ) }}" title="{{ art['article'] }}" alt="{{ art['article'] }}"  style="height: 100%;"  />
                                                    </a>
                                                    <div class="button-group" style="top: 3%;">
                                                        <button class="btn-cart " type="button" title="Add to Cart" onclick="addtocart({{ art["idart"] }})" >
                                                            <i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Panier</span>
                                                        </button>

                                                        <button class="btn-quickview" type="button" title="Voir Détails" onclick="location.href='{{ path('product',{ 'id': art['idart'] }) }}'" ><i class="fa fa-eye"></i>
                                                            <span title="Voir Détails">Voir</span>
                                                        </button>

                                                        <button class="btn-compare">
                                                            <a class="icon zoom" data-lightbox="example-set" href="{{ asset(artciles_dir ~ art['image'] ) }}" title="ZOOM">
                                                                <i class="fa fa-plus"></i> <span class="hidden-xs hidden-sm hidden-md">ZOOM</span></a>
                                                        </button>
                                                    </div>
                                                </div>


                                            <div class="thumb-description">
                                                <div class="caption">
                                                    <h4><a href="{{ path('product',{ 'id': art["idart"] }) }}"> {{ art['article'] }}</a></h4>
                                                    {#<div class="rating">#}
                                                        {#<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>#}
                                                        {#<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>#}
                                                        {#<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>#}
                                                        {#<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>#}
                                                        {#<span class="fa fa-stack"><i class="fa fa-star off fa-stack-2x"></i></span>#}
                                                    {#</div>#}
                                                    {% if(art['remise']) %}
                                                    <div>
                                                        <label class="text-right">Remise <span class="badge badge-pill badge-secondary" style="border-radius: 5px ;background-color: #789b41;"> {{ art['remise'] }} %</span></label><br>

                                                        <label class="text-right">  <h6> Du  {{ art['debutpromo']|date('d/m/Y')  }}  Au  {{ art['finpromo']|date('d/m/Y') }} </h6></label>
                                                    </div>
                                                    {% else %} <div class="text-right"> <label >&nbsp;</label></div>
                                                    {% endif %}

                                                    <div class="price">
                                                        {{ (art['ttc'])|localizedcurrency('TND')  }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            {%  for cat in categories_articles %}
                            <div id="tab-{{ cat.cbmarq }}" class="tab-pane row">
                                <div class="products-carousel">
                                    {%  for art in  articles %}
                                        {% if( cat.cbmarq  == art['famille']) %}
                                            <div class="product-layouts">
                                                <div class="product-thumb transition" >
                                                    <div class="image" >
                                                        <a href="{{ path('product',{ 'id': art["idart"] }) }}" style="height: 300px;">
                                                            <img class="image_thumb" src="{{ asset(artciles_dir ~ art['image'] ) }}" title="{{ art['article'] }}" alt="{{ art['article'] }}"  style="height: 100%;" />
                                                            <img class="image_thumb_swap" src="{{ asset(artciles_dir ~ art['image'] ) }}" title="{{ art['article'] }}" alt="{{ art['article'] }}"  style="height: 100%;"  />
                                                        </a>
                                                        <div class="button-group" style="top: 3%;">
                                                            <button class="btn-cart " type="button" title="Add to Cart" onclick="addtocart({{ art["idart"] }})" >
                                                                <i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Panier</span>
                                                            </button>

                                                            <button class="btn-quickview" type="button" title="Voir Détails" onclick="location.href='{{ path('product',{ 'id': art['idart'] }) }}'" ><i class="fa fa-eye"></i>
                                                                <span title="Voir Détails">Voir</span>
                                                            </button>

                                                            <button class="btn-compare">
                                                                <a class="icon zoom" data-lightbox="example-set" href="{{ asset(artciles_dir ~ art['image'] ) }}" title="ZOOM">
                                                                    <i class="fa fa-plus"></i> <span class="hidden-xs hidden-sm hidden-md">ZOOM</span></a>
                                                            </button>
                                                        </div>
                                                    </div>


                                                    <div class="thumb-description">
                                                        <div class="caption">
                                                            <h4><a href="{{ path('product',{ 'id': art["idart"] }) }}"> {{ art['article'] }}</a></h4>
                                                            {#<div class="rating">#}
                                                            {#<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>#}
                                                            {#<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>#}
                                                            {#<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>#}
                                                            {#<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>#}
                                                            {#<span class="fa fa-stack"><i class="fa fa-star off fa-stack-2x"></i></span>#}
                                                            {#</div>#}
                                                            {% if(art['remise']) %}
                                                                <div>
                                                                    <label class="text-right">Remise <span class="badge badge-pill badge-secondary" style="border-radius: 5px ;background-color: #789b41;"> {{ art['remise'] }} %</span></label><br>

                                                                    <label class="text-right">  <h6> Du  {{ art['debutpromo']|date('d/m/Y')  }}  Au  {{ art['finpromo']|date('d/m/Y') }} </h6></label>
                                                                </div>
                                                            {% else %} <div class="text-right"> <label >&nbsp;</label></div>
                                                            {% endif %}

                                                            <div class="price">
                                                                {{ (art['ttc'])|localizedcurrency('TND')  }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                    {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $('.TTProduct-Tab  .tab-box-heading > ul > li:first-child').addClass('active');
                $('.TTProduct-Tab  .tab-content > .tab-pane:first-child').addClass('active');
                var tttrendingproducts = $(".TTProduct-Tab .products-carousel.owl-carousel");
                tttrendingproducts.owlCarousel({
                    items:4,
                    itemsDesktop : [1170,4],
                    itemsDesktopSmall : [991,3],
                    itemsTablet: [767,2],
                    itemsMobile : [480,1],
                    navigation: true,
                    pagination: false
                });
            </script>

            <div class="html-content">
                <div class="box-content">
                    <div id="ttcmstestimonial" class=" bottom-to-top hb-animate-element">
                        <div class="tttestimonial-content container">
                            <div class="tttestimonial-inner">
                                <div class="tt-title">client say</div>
                                <ul id="tttestimonial-carousel" class="tt-carousel">
                                  {% for a in avis %}
                                      {% if a.visibilite==1 %}
                                    <li>
                                        <div class="testimonial-desc">
                                            <p>{{ a.message }}.</p>
                                        </div>
                                        <div class="testimonial-image"><img alt="" src="{{ asset(imagepath ~ a.image ) }}"></div>
                                        <div class="testimonial-content">
                                            <div class="testimonial-user-title">
                                                <h4>{{ a.nom }}</h4>
                                                <div class="user-designation">{{ a.profession }}</div>
                                            </div>
                                        </div>
                                    </li>
                                          {% endif %}
                                  {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tt-category-featured hb-animate-element bottom-to-top">
                <div class="container">
                    <div class="box-heading">
                        <h3>Nos Commerciaux</h3>
                        <div class="ttdesc"></div>
                    </div>
                    <div class="ttfcat-items">
                        <div class="customNavigation">
                            <a class="btn prev ttfcat_prev"></a>
                            <a class="btn next ttfcat_next"></a>
                        </div>
                        <div class="row">
                            <div class="category-feature tt-carousel">
                                {% for com in commercials %}
                                   <div class="item">
                                    <div class="content">
                                        <div class="image">
                                            <a href="{{ asset(imagepath ~ com.logo ) }}">
                                                <img src="{{ asset(imagepath ~ com.logo ) }}" alt="Cosmetology" title="Cosmetology" class="img-responsive" />
                                            </a>
                                        </div>
                                        <div class="caption">
                                            <div class="cat-title">
                                                <h4><a href=""></a></h4>
                                            </div>
                                            <div class="cat-sub">
                                                <ul>
                                                    <li><a href="https://demo.templatetrip.com/Opencart/OPCTM01/OPCTM002_beautico/OPC01/index.php?route=product/category&amp;path=20_26" class="list-group-item">BB cream</a></li>
                                                    <li><a href="https://demo.templatetrip.com/Opencart/OPCTM01/OPCTM002_beautico/OPC01/index.php?route=product/category&amp;path=20_27" class="list-group-item">Cosmeceutical</a></li>
                                                    <li><a href="https://demo.templatetrip.com/Opencart/OPCTM01/OPCTM002_beautico/OPC01/index.php?route=product/category&amp;path=20_87" class="list-group-item">BITE Beauty</a></li>
                                                    <li><a href="https://demo.templatetrip.com/Opencart/OPCTM01/OPCTM002_beautico/OPC01/index.php?route=product/category&amp;path=20_92" class="list-group-item">Eye liner</a></li>
                                                </ul>
                                            </div>
                                            <a href="#">{{ com.intitule }}<br>{{ com.email }}<br>{{ com.telephone }} </a>

                                        </div>
                                        <!-- Caption END -->
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {#
            <div class="html-content">
                <div class="box-content">
                    <div id="ttcmsservice" class="hb-animate-element bottom-to-top">
                        <div class="ttcmsservicemain">
                            <div class="ttcmsservice-maindesc ttservice col-sm-6 col-xs-6">
                                <div class="ttservice service1">
                                    <div class="ttservice-icon"><img alt="service-icon1" src="{{ asset('bundles/frontend/') }}image/catalog/demo/banners/service-01.png"></div>
                                    <div class="ttservice-content">
                                        <div class="ttservice-title">No Chemicals</div>
                                        <div class="ttservice-desc">Lorem ipsum dolor sit amet, consectetur maximus erat ultricies.</div>
                                    </div>
                                </div>
                                <div class="ttservice service2">
                                    <div class="ttservice-icon"><img alt="service-icon2" src="{{ asset('bundles/frontend/') }}image/catalog/demo/banners/service-02.png"></div>
                                    <div class="ttservice-content">
                                        <div class="ttservice-title">Traditional Methods</div>
                                        <div class="ttservice-desc">Lorem ipsum dolor sit amet, consectetur maximus erat ultricies.</div>
                                    </div>
                                </div>
                                <div class="ttservice service3">
                                    <div class="ttservice-icon"><img alt="service-icon3" src="{{ asset('bundles/frontend/') }}image/catalog/demo/banners/service-03.png"></div>
                                    <div class="ttservice-content">
                                        <div class="ttservice-title">Natural Aroma</div>
                                        <div class="ttservice-desc">Lorem ipsum dolor sit amet, consectetur maximus erat ultricies.</div>
                                    </div>
                                </div>
                                <div class="ttservice service4">
                                    <div class="ttservice-icon"><img alt="service-icon4" src="{{ asset('bundles/frontend/') }}image/catalog/demo/banners/service-04.png"></div>
                                    <div class="ttservice-content">
                                        <div class="ttservice-title">Natural Aroma</div>
                                        <div class="ttservice-desc">Lorem ipsum dolor sit amet, consectetur maximus erat ultricies.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="ttcmsservice-img ttservice1 col-sm-6 col-xs-6">
                                <div class="ttservice-img"><a><img alt="service-image1" src="{{ asset('bundles/frontend/') }}image/catalog/demo/banners/cms-banner-01.jpg"></a></div>
                            </div>
                            <div class="ttcmsservice-img ttservice2 col-sm-12 col-xs-12">
                                <div class="ttservice-image">
                                    <div class="ttservice-img"><a><img alt="service-image2" src="{{ asset('bundles/frontend/') }}image/catalog/demo/banners/cms-banner-02.jpg"></a></div>
                                    <div class="ttservice-discount">
                                        <span class="ttdiscount discount">50</span>
                                        <span class="ttservice-offer discount">
                                          <span class="ttdiscount-perc">%</span>
                                          <span class="ttdiscount-off">off</span>
                                          </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            #}

            <section id="map" class="gray-section">
                <!-- Section heading -->
                <div class="section-heading">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d25910.943218465298!2d10.597147099999999!3d35.729467150000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2stn!4v1568102762209!5m2!1sfr!2stn" height="450" frameborder="0" style="border:0; width:100%" allowfullscreen=""></iframe>
                </div>
                <!-- Intro text -->
                <!--/row team -->
                <!--/container -->
            </section>



        </div>
    </div>


                {% if pub %}
                    <div class="newletter-popup" style="background: #ffffff url('{{ asset(imagepath ~ pub[0].image) }}') no-repeat scroll center center">
                        <div id="boxes" class="newletter-container">
                            <div style="" id="dialog" class="window">
                                <div id="popup2">


                                    <h1 style="color: red"> {{ pub[0].fin|date("m/d/y") }}</h1>
                                </div>

                                    <div class="box"  style="padding-top: 15px">
                                        <div  style="margin-bottom: 2%">


                                            <h3> {{ pub[0].nom }}</h3>
                                        </div>
                                        <div class="box-content newleter-content" style="height: 315px;">
                                            {{ pub[0].description }}



                                        </div>
                                    </div>



                            </div>

                        </div>
                    </div>
                {% else %}
                    <div class="newletter-popup">
                        <div id="boxes" class="newletter-container">
                            <div style="" id="dialog" class="window">
                                <div id="popup2">
                                    <span class="b-close"><span>X</span></span>
                                </div>

                                    <div class="box"  style="padding-top: 15px">
                                        <div  style="margin-bottom: 1%">
                                            <h3>Abonnez-vous</h3>
                                            <small>Inscription Gratuite</small>
                                        </div>
                                        <div class="box-content newleter-content"  >

                                            {{ render(controller('CRMBundle:Registration:register')) }}


                                        </div>
                                    </div>


                            </div>

                        </div>
                    </div>

                {% endif %}

    {% if(app.user) %}
    <div class="newletter-popup" id="connect">
        <div id="boxes" class="newletter-container">
            <div style="" id="dialog" class="window">
                <div id="popup2" onclick="$('#connect ,.modal-backdrop').removeClass('xxx modal-backdrop in');"  >
                    <span class="b-close"><span>X</span></span>
                </div>
                <div class="box">
                    <div >
                        <i class="fa fa-sign-in fa-6"></i>
                        <h3>Se Connecter</h3>
                    </div>
                    <div class="box-content newleter-content">
                        <div id="frm_subscribe">
                            {{ render(controller('CRMBundle:Security:login')) }}
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>

    <style>
        .xxx{
            position: absolute;
            top: 536px;
            z-index: 9999;
            opacity: 1!important;
            display: block!important;
        }
    </style>
{% endif %}
{% endblock %}