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

{% block title %} {{ categorie.metaTitle}} {% endblock %}
{% block description %} {{ categorie.metaDesc}} {% endblock %}

{% block body %}

    {% include "front/inc/breadcrumb.html.twig" with 
        {
            'content_title': categorie.nomCategorie,
            'current_page' : categorie.nomCategorie,
            'image'        : categorie.imageCategorie
        } 
    %}
    
  <div class="page_massages">
    <section class="massages-intro">
        <p>
            {{ categorie.textCategorie|raw }}
        </p>
    </section>
    {% if produits|length > 0 %}
        {% for key,item in produits %}

            {% set discountPercentage = 0 %}
            {% if item.typeProduit == 1 %}
                {% set formulesProduits = item.prixProduits[0].formulesProduits %}
                {% set lowestPrice      = item.prixProduits[0].prixParPersonne %}

                {% set total = 0 %}
                {% for it in formulesProduits %}
                    {% set total = total + it.prixProduitParPersonne %}
                {% endfor %}
                {% set discountPercentage = ((total - lowestPrice) / total ) * 100 %}
            {% endif %}

            <div class="{{ (key is even ) ? 'massages-type-' : 'massages-type-reverse' }}">
                <a href="{{ path('fiche_massage', {_locale: app.request.locale , categorie:item.categorie.slug ,slug : item.slugProduits }) }}"  class="massages-type">
                   
                    <div class="massages-type-image">
                        {% if discountPercentage > 0 %}
                            <span class="miniature-icon-promo">
                                <svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M28.4784 2.83953C30.7359 1.00279 33.5574 0 36.4677 0C39.3781 0 42.1995 1.00279 44.4571 2.83953L45.3028 3.52667L46.3705 3.35224C49.2443 2.89052 52.1894 3.43319 54.7099 4.88887C57.2304 6.34455 59.1723 8.62431 60.2085 11.3442L60.5944 12.3538L61.604 12.7397C64.3239 13.7759 66.6036 15.7178 68.0593 18.2383C69.515 20.7588 70.0577 23.7039 69.5959 26.5777L69.4215 27.6507L70.1087 28.4911L68.3062 29.9552L70.1034 28.4911C73.8932 33.1425 73.8932 39.8131 70.1034 44.4698L69.4215 45.3102L69.5959 46.378C70.0577 49.2517 69.515 52.1969 68.0593 54.7173C66.6036 57.2378 64.3239 59.1797 61.604 60.216L60.5944 60.6018L60.2085 61.6167C59.1713 64.3356 57.2291 66.6142 54.7087 68.0689C52.1883 69.5235 49.2437 70.0655 46.3705 69.6034L45.2975 69.4342L44.4571 70.1161C42.1995 71.9528 39.3781 72.9556 36.4677 72.9556C33.5574 72.9556 30.7359 71.9528 28.4784 70.1161L27.6379 69.429L26.5702 69.6034C23.6971 70.0655 20.7525 69.5235 18.2321 68.0689C15.7117 66.6142 13.7694 64.3356 12.7322 61.6167L12.3464 60.6018L11.3315 60.216C8.61355 59.1778 6.33613 57.2352 4.88248 54.7149C3.42883 52.1946 2.88768 49.2505 3.35009 46.378L3.52452 45.3102L2.83738 44.4645C1.00198 42.2074 0 39.387 0 36.4778C0 33.5686 1.00198 30.7482 2.83738 28.4911L3.52452 27.6454L3.35009 26.5777C2.88768 23.7052 3.42883 20.7611 4.88248 18.2408C6.33613 15.7205 8.61355 13.7778 11.3315 12.7397L12.3464 12.3538L12.7322 11.3442C13.7685 8.62431 15.7104 6.34455 18.2308 4.88887C20.7513 3.43319 23.6964 2.89052 26.5702 3.35224L27.6379 3.52667L28.4784 2.83953Z" fill="#EB001B"/>
                                </svg>
                                <span class="miniature-icon-promo-price">-{{discountPercentage|number_format(0, '.', '')}}%</span>
                            </span>
                        {% endif %}
                        <img src="{{ (item.imageProduits) ? sonata_path(item.imageProduits, 'massage') : asset('front/images/massage2.jpg') }}" alt="{{item.nomProduits}}" width="415" height="289" />
                        {% if item.reserveAuFemme is same as(true) %}
                            <div class="reserveaufemme">{{ 'message.pourlesfemme'|trans }}</div>
                        {% endif %}
                    </div>
                    <div class="massages-type-text">
                        <h2 class="massages-title-type">{{ item.nomProduits }}</h2>
                        
                        {% set combinedDuration = '' %}
                        {% set type = false %}
                        {% for horaire in item.prixProduits %}
                            {% set type = horaire.duree.type %}
                            {% set combinedDuration = combinedDuration ~ horaire.duree.intitule ~ '/' %}
                        {% endfor %}

                        {% if type is same as(false) %}
                            <div class="massages-type-horaire">
                                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="none" viewBox="0 0 19 19">
                                    <g clip-path="">
                                        <path
                                            fill="{{ (key is even ) ? '#000' : '#fff' }}"
                                            d="M9.5 0A9.5 9.5 0 0 1 19 9.5 9.5 9.5 0 0 1 9.5 19 9.5 9.5 0 0 1 0 9.5 9.5 9.5 0 0 1 9.5 0Zm0 1.325a8.175 8.175 0 1 0 0 16.35 8.175 8.175 0 0 0 0-16.35Zm-.883 3.977c.365 0 .662.297.662.663v4.64h4.64a.663.663 0 0 1 0 1.325H8.615a.663.663 0 0 1-.663-.663V5.966c0-.367.297-.664.663-.664Z"
                                        ></path>
                                    </g>
                                    <defs>
                                        <clipPath id="a">
                                            <path fill="#fff" d="M0 0h19v19H0z"></path>
                                        </clipPath>
                                    </defs>
                                </svg>
                                <span>
                                    {% set combinedDuration = combinedDuration|trim('/') %}
                                    {{ combinedDuration }}
                                </span>
                            </div>
                        {% endif %}
                        
                        <div class="massages-type-dis">
                            <p>
                               {{ item.introProduits|raw }}
                            </p>

                            {% if type is same as(false) %}
                                <span class="massages-type-dis-price">
                                {% if discountPercentage %}
                                    <span class="original">{{ total }}DH</span>
                                {% endif %}
                                <span class="apartir">  {{ (item.prixProduits|length > 1) ? 'index.apartir'|trans : '' }} </span>
                                   
                                    {% set lowestPrice = item.prixProduits[0].prixParPersonne %}
                                    {% for horaire in item.prixProduits %}
                                        {% if horaire.prixParPersonne < lowestPrice %}
                                            {% set lowestPrice = horaire.prixParPersonne %}
                                        {% endif %}
                                    {% endfor %}
                                    {{ lowestPrice|number_format(0, '.', ' ') }}DH /Pers
                                </span>
                            {% endif %}

                        </div>
                        <div class="massages-type-btn">
                            <span class="btn-Decouvrir button--ujarak">
                                {{ 'index.découvrir'|trans }}
                            </span>

                            {% if item.prixProduits|length <= 1 %}
                                <span id="{{item.id}}" data-cat="{{item.categorie.id}}" data="{{item.prixProduits[0].duree.id}}" class="reserveProduitlisting reserver-btn button--ujarak">
                                    {{ 'index.reserver'|trans }}
                                </span>
                            {% endif %}
                        </div>
                    </div>
                </a>
            </div>
        {% endfor %}
    {% endif %}
</div>

{% endblock %}