{% extends 'base.html.twig' %}
{% block title %}{{title|default('')}}{% endblock %}
{% block metas %}
<meta name="title" content="{{title|default('')}}">
{# <meta name="description" content="{{meta.description}}"> #}
{% endblock %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('assets/stylesheets/catalogues.css') }}">
{% endblock %}
{% block body %}
{% include '/partials/header.html.twig' with {'header_theme': 'dark', 'current_page':'catalogues'} %}
<!-- Main Content -->
{# <img class="service-banner" src="{{ asset(illustration_image) }}" alt="Pixelsior avatar"> #}
<main class="main-content">
<!-- Sub Service Intro Area -->
<div class="tm-section subservices-introduction-area tm-padding-section bg-white pb-3">
<div class="container position-relative">
<div class="subservice-title">{{title | raw}}</div>
<p>
{{description | raw}}
</p>
{# <div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs justify-content-center" id="subserviceTab" role="tablist">
{% for key, subservice in subservices %}
<li class="nav-item" role="presentation">
<button class="nav-link {{subservice.active ? 'active':''}}" id="{{subservice.nav.id}}" data-bs-toggle="tab" data-bs-target="{{subservice.nav.target}}" type="button" role="tab" aria-controls="{{subservice.nav.controls}}" aria-selected="true">{{subservice.title}}</button>
</li>
{% endfor %}
</ul>
<div class="tab-content" id="subserviceTabContent">
{% for subservice in subservices %}
<div class="tab-pane fade {{subservice.active ? 'show active':''}}" id="{{subservice.id}}" role="tabpanel" aria-labelledby="{{subservice.nav.id}}">
<p class="subservice-item-description text-center mt-3">{{subservice.description | raw}}</p>
<div class="feed-container mt-5">
<div class="feed">
{% for subservice_item in subservice.nav.items %}
<div class="feed-item">
<img src="{{ asset(subservice_item.img) }}" alt="Element du sous-service">
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div> #}
</div>
</div>
{% if packages is defined and packages %}
<div class="tm-section tarifs-area tm-padding-section bg-white pb-3">
<div class="container position-relative">
<h2 class="text-center">{{pack_title}}<span class="text-yellow">.</span></h2>
{% if typeContrats is defined %}
<p class="text-center">Faites une simulation en quelques clics pour découvrir les différentes offres disponibles et voir le prix associé à chaque contrat.</p>
<div class="form-group d-flex align-items-center justify-content-center mb-3">
{% for typeContrat in typeContrats %}
<div class="form-check form-check-inline">
<input class="form-check-input global_type_contrat" type="radio" name="global_type_contrat_id"
id="global_type_contrat_id_{{typeContrat.id}}"
value="{{ typeContrat.id }}" {% if typeContrats[0].id == typeContrat.id %}checked{% endif %}>
<label class="form-check-label" for="global_type_contrat_id_{{typeContrat.id}}">
{{ typeContrat.label }}
</label>
</div>
{% endfor %}
{% endif %}
</div>
<img class="leaf leaf-3" src="{{ asset('assets/images/webp/leaf-3.webp') }}" alt="Feuille n°3">
<img class="leaf leaf-2" src="{{ asset('assets/images/webp/leaf-2.webp') }}" alt="Feuille n°2">
<img class="leaf leaf-1" src="{{ asset('assets/images/webp/leaf-1.webp') }}" alt="Feuille n°1">
<div class="row">
{% for package in packages %}
<div class="col-lg-4">
<div class="bd-price__box text-center mb-30">
<div class="bd-price__heading">
<span class="bd-price__subtitle">{{package.name}}</span> <br/>
<span class="under-price__subtitle">
{% if package.packagePriceByTypeContrats | length > 0 %}
<div class="d-none">
<span class="mt-3 price-tav">Contrat</span> <br/>
<div class="form-group">
{% for price in package.packagePriceByTypeContrats %}
<div class="form-check form-check-inline">
<input class="form-check-input check-type-contrat type-contrat-{{price.typeContrat.id}}" type="radio" name="type_contrat_id_{{package.id}}"
data-price="{{price.price}}" data-package-id="{{package.id}}"
value="{{ price.typeContrat.id }}" id="price_{{price.id}}" {% if package.packagePriceByTypeContrats[0].id == price.id %}checked{% endif %}>
<label class="form-check-label" for="price_{{price.id}}">
{{ price.typeContrat.label }}
</label>
</div>
{% endfor %}
</div>
</div>
<span class="mt-3 price-tav">ht</span> <br/>
<b class="amount-pack pack-contrat-price-{{package.id}}">{{package.packagePriceByTypeContrats[0].price|format_currency('EUR')}}</b> <br/>
<br/>
<span>TVA non applicable</span> <br/>
{% else %}
<span class="mt-3 price-tav">ht</span> <br/>
<b class="amount-pack">{{package.amount|format_currency('EUR')}}</b> <br/>
<span class="price-period">
{% if package.period == null %}
(Paiement unique)
{% else %}
{{package.period}}
{% endif %}
</span>
<br/>
<span>TVA non applicable</span> <br/>
{% endif %}
</span>
</div>
<div class="bd-price__content">
<!-- <div class="bd-price__circle">
<span class="bd-price__value"></span>
</div> -->
<ul class="list-group">
{% for sub in package.packageSubservice %}
<li class="list-group-item" style="border-left: none; border-right: none; border-radius: 0 !important;">
<div class="row">
<div class="col-10">
{{sub.name}}
</div>
<div class="col-2">
<span><i class="fas fa-check-circle ms-2 text-yellow end"></i></span>
</div>
</div>
</li>
{% endfor %}
</ul>
{# {% if btn_buy is defined and btn_buy %} #}
<div class="bd-price-btn-wrapper">
<a href="{{ custom_path('app_our_catalogues_payment', {'id': package.id, 'typeContratId': (package.packagePriceByTypeContrats|length > 0) ? package.packagePriceByTypeContrats[0].typeContrat.id : 1 }) }}" class="tm-button button-blu mt-3 buy-pack-btn buy-pack-btn-{{package.id}}" data-template="{{ custom_path('app_our_catalogues_payment', {'id': package.id, 'typeContratId': '--typeContratId--'}) }}">Acheter</a>
</div>
{# {% else %} #}
{# {% endif %} #}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
<!-- Sub Service Intro Area -->
<!-- Tarifs Area -->
{# <div class="tm-section tarifs-area tm-padding-section bg-white">
<div class="container position-relative">
<h2 class="text-center">Nos tarifs<span class="text-yellow">.</span></h2>
<p class="text-center mw-75">{{ tarifs.description | raw}}</p>
<img class="leaf leaf-3" src="{{ asset('assets/images/webp/leaf-3.webp') }}" alt="Feuille n°3">
<img class="leaf leaf-2" src="{{ asset('assets/images/webp/leaf-2.webp') }}" alt="Feuille n°2">
<img class="leaf leaf-1" src="{{ asset('assets/images/webp/leaf-1.webp') }}" alt="Feuille n°1">
<div class="row">
<div class="col-lg-12">
<div class="tarifs">
{% for item in tarifs.items %}
<div class="tarif-item" {% if tarif_item_padding is defined and tarif_item_margin is defined %} style="padding: {{tarif_item_padding}}; margin: {{tarif_item_margin}};" {% endif %} >
<h3 style="min-height: 65px;">{{item.product}}</h3>
<div class="tarif_pricing_block mb-1" style="min-height: 85px;">
{% if item.__price is defined %} <span> {{item.__price}} </span> {% endif %}
<div class="tarif-pricing">{{item.price}} €</div>
</div>
{% if item.list_group|length > 1 %}
<ul class="list-group">
{% for _item in item.list_group %}
<li class="list-group-item {% if tarif_item_text_align is defined %} {{tarif_item_text_align}} {% endif %} ">{{_item|raw}} <span><i class="fas fa-check-circle ms-2"></i></span></li>
{% endfor %}
</ul>
{% else %}
<ul class="list-group">
<li class="list-group-item">{{item.list_group.0|raw}}<span></span></li>
</ul>
{% endif %}
<a href="{{ custom_path('app_contact', {price: item.price, product: item.product}) }}" class="tm-button button-blu mt-3">Obtenir un devis</a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div> #}
<!-- Tarifs Area -->
{% if description_btm is defined and description_btm %}
<div class="tm-section tarifs-area tm-padding-section bg-white">
<div class="container position-relative">
<p>
{{description_btm | raw}}
</p>
</div>
</div>
{% endif %}
{% include '/partials/contact_us.html.twig' %}
</main>
<!--// Main Content -->
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
</script>
{% endblock %}