{% import "front/"~ app.request.server.get('APP_THEME') ~"/form/macro_form.html.twig" as forms %}
{% set parametre = ParametreSite() %}
{% if bloc.form %}
<section class="form-bloc2 form-avis-clients py-5">
<div class="container-fluid wrapper">
{% if bloc.form.titre != '' or bloc.form.texte != '' %}
<div class="row text-center">
{% if bloc.form.titre != '' %}
<div class="col-md-12"><h2 class="sub-title">{{bloc.form.titre}}</h2></div>
{% endif %}
{% if bloc.form.texte != '' %}
<div class="col-md-12"><div class="texte-content">{{bloc.form.texte|raw}}</div></div>
{% endif %}
</div>
{% endif %}
<form id="form-{{bloc.form.id}}" action="{{path('save_form')}}" method="post" enctype="multipart/form-data" class="needs-validation form-recap {{bloc.form.identifier}}" novalidate>
{% for message in app.flashes('success-form-message') %}
<div class="alert alert-success alert-form mx-auto text-center">
{{ message|raw }}
</div>
{% endfor %}
{% for message in app.flashes('error-form-' ~ bloc.form.id) %}
<div class="alert alert-danger">
{{ message|raw }}
</div>
{% endfor %}
{% set message = 'validation_form'|trans([],'variable') %}
<input type="hidden" value="{{bloc.form.id}}" name="IdForm">
<div class="row">
{% for item in bloc.form.data %}
{% set label = item.label|default(null)%}
{% set placeholder = item.placeholder|default(null) %}
{% if item.type == "header" %}
<div class="col-12">
{{ forms.header(item.subtype,item.label,item.className) }}
</div>
{% elseif item.type == 'date' %}
<div class="form-group col-sm-12 col-md-6 {{ item.classGlobal is defined ? item.classGlobal : '' }}" >
{{ forms.input(item.name,placeholder,item.className,item.required,item.type,label) }}
<div class="invalid-feedback">
{{item.ErrorMessage|default(message)}}
</div>
</div>
{% elseif item.type == "text" %}
<div {% if item.classGlobal is defined %} class="{{item.classGlobal}} {{item.name == 'ctc_city'?'ctc_city':''}}" {% else %} class="col-sm-6 {{item.name == 'ctc_city'?'ctc_city':''}}" {% endif %}>
<div class="form-group {{ item.required == "true" ? 'required' : '' }}">
{{ forms.input(item.name,item.type,item.className,item.required,item.subtype,label,placeholder,item.maxlength|default(null)) }}
<div class="invalid-feedback">
{% if item.name == 'ctc_postcode' %}
{{'validation_code_postal'|trans([],'variable')}}
{% else %}
{{item.ErrorMessage|default(message)}}
{% endif %}
</div>
</div>
</div>
{% elseif item.type == "number" %}
<div {% if item.classGlobal is defined %} class="{{item.classGlobal}}" {% else %} class="col-sm-6 " {% endif %}>
<div class="form-group {{ item.required == "true" ? 'required' : '' }}">
{# {{ forms.text(item.name,item.type,item.className,item.required,label,placeholder,item.maxlength|default(null)) }} #}
<label>{{item.label|raw}}</label>
<input type="number" name="{{item.name}}" placeholder="{{item.placeholder is defined ? item.placeholder:''}}" class="form-control {{item.className is defined ? item.className:''}}" {{ item.required == "true" ? 'required' : '' }} data-form-input/>
<div class="invalid-feedback">
{{item.ErrorMessage|default(message)}}
</div>
</div>
</div>
{% if item.name == 'ctc_city' %}
{{ render(controller('App\\Controller\\Front\\FunctionController::renderCitySelectForm', {'class' : item.classGlobal, 'required' : item.required,'name':item.name,'label':item.label})) }}
{% endif %}
{% elseif item.type == "select" %}
<div {% if item.classGlobal is defined %} class="{{item.classGlobal}}" {% else %} class="col-sm-6" {% endif %}>
<div class="form-group {{ item.required == "true" ? 'required' : '' }}">
{{ forms.select(item.type,item.name,item.className,item.required,item.multiple,item.values,label,placeholder) }}
<div class="invalid-feedback">
{{item.ErrorMessage|default(message)}}
</div>
</div>
</div>
{% elseif item.type == "textarea" %}
<div {% if item.classGlobal is defined %} class="{{item.classGlobal}}" {% else %} class="col-sm-12" {% endif %}>
<div class="form-group {{ item.required == "true" ? 'required' : '' }}">
{{ forms.textarea(item.name,item.type,item.className|default(''),item.required,item.subtype,label|replace({'<br>':''}),placeholder,item.rows|default('3')) }}
{% if item.required %}
<div class="invalid-feedback">
{{item.ErrorMessage|default(message)}}
</div>
{% endif %}
</div>
</div>
{% elseif item.type == "file" %}
<div {% if item.classGlobal is defined %} class="col-md-6 col-lg-4 input-file {{item.classGlobal}}" {% else %} class="col-md-6 text-left" {% endif %}>
<div class="form-group">
{{ forms.input(item.name,item.type,item.className|default(''),item.required,item.subtype,label,placeholder,item.maxlength|default(null)) }}
<div class="invalid-feedback">
{{item.ErrorMessage|default(message)}}
</div>
</div>
</div>
{% elseif item.type == "checkbox-group" %}
<div class="{% if item.classGlobal is defined %}{{item.classGlobal}}{% else %}col-sm-12{% endif %}">
{# {% if label %}<label>{{label}}</label>{% endif %} #}
<div class="form-group {{ item.required == "true" ? 'required' : '' }} {% if item.inline is defined and item.inline == "true" %}d-flex{% endif %}">
{{ forms.checkbox(item.required,item.name,item.values) }}
</div>
</div>
{% elseif item.type == "radio-group" %}
<div class="{% if item.classGlobal is defined %}{{item.classGlobal}}{% else %}col-sm-12{% endif %}">
<div class="form-group {{ item.required == "true" ? 'required' : '' }} {% if item.inline is defined and item.inline == "true" %}d-flex align-items-center{% endif %}">
{% if item.label %}<label class="required mb-0">{{item.label}} : </label>{% endif %}
<div class="radio-group ml-2">
{% for value in item.values %}
<input type="radio" name="{{item.name}}" id="{{item.name}}-{{value.value}}" value="{{value.value}}"><label for="{{item.name}}-{{value.value}}">{{value.label}}</label>
{% endfor %}
</div>
</div>
</div>
{% elseif item.type == "paragraph" %}
<div class="{% if item.classGlobal is defined %}{{item.classGlobal}}{% else %}col-sm-12{% endif %}">
<p>{{item.label|unescape|raw}}</p>
</div>
{% endif %}
{% endfor %}
{% if parametre.typerecaptcha == 2 and parametre.clekey != null %}
<div class="col-md-12 form-group text-center">
<div class="g-recaptcha" id="{{bloc.form.id}}_captcha" data-sitekey="{{parametre.clekey}}"></div>
</div>
{% endif %}
{% for item in bloc.form.data %}
{% set label = item.label|default(null)%}
{% set placeholder = item.placeholder|default(null) %}
{% if item.type == "button" %}
<div {% if item.classGlobal is defined %} class="{{item.classGlobal}}" {% else %} class="col-sm-12" {% endif %}>
<div class="form-group text-center mb-0">
{{ forms.button(item.name,item.type,item.subtype,item.className,item.label) }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% if parametre.typerecaptcha == 1 %}
<input type="hidden" id="{{bloc.form.id}}_captcha" name="g-recaptcha-response" value="">
{# <script src="https://www.google.com/recaptcha/api.js?render={{ParametreSite().clekey}}"></script> #}
{% endif %}
</form>
</div>
</section>
{% if bloc.avis_clients is defined and bloc.avis_clients is not empty %}
{% set sommeNote = 0 %}
{% for item in bloc.avis_clients %}
{% set sommeNote = sommeNote + unserialize(item.data)['note'] %}
{% endfor %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "{{parametre.titre}}",
"description": "{{parametre.titre}}",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "{{(sommeNote / bloc.avis_clients|length)| number_format(1) }}",
"reviewCount": "{{bloc.avis_clients|length}}"
},
"review": [ {% for item in bloc.avis_clients %}
{
"@type": "Review",
"author": {
"@type": "Person",
"name": "{{unserialize(item.data)['nom']|raw}}"
},
"datePublished": "{{item.createdAt|date('d-m-Y')}}",
"reviewRating": {
"@type": "Rating",
"ratingValue": "{{unserialize(item.data)['note']}}"
},
"reviewBody": "{{unserialize(item.data)['message']|raw}}"
}{% if not loop.last %},{% endif %}{% endfor %}
]
}
</script>
<section class="liste-avis pb-5">
<div class="container-fluid wrapper">
<hr class="mb-5">
<div class="d-flex flex-column-reverse">
<div class="results affichage5" data-current-page="1" aria-live="polite">
{% for item in bloc.avis_clients %}
<div class="article d-none">
<div class="article-cnt">
<h4 class="nom-avis mb-2">{{unserialize(item.data)['nom']|raw}}</h4>
<div class="date-avis mt-0"><i class="fa fa-calendar mr-2"></i>{{item.createdAt|date('d-m-Y H:i')}}</div>
{% if unserialize(item.data)['note'] %}
<div class="note-avis note-{{unserialize(item.data)['note']}} mt-2">
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
</div>
{% endif %}
{# <div class="email-avis mt-0">{{unserialize(item.data)['email']|raw}}</div> #}
<div class="txt-avis mt-2">{{unserialize(item.data)['message']|raw}}</div>
</div>
</div>
{% endfor %}
</div>
<div class="infos-avis-client d-sm-flex justify-content-sm-between">
<div class="moyenne-avis"><strong>Note moyenne : {{(sommeNote / bloc.avis_clients|length)| number_format(1) }}</strong></div>
<div class="nombre-avis"><strong>{{bloc.avis_clients|length}} messages</strong></div>
</div>
</div>
</div>
<nav class="pagination-container">
<button class="pagination-button" id="prev-button" aria-label="Previous page" title="Previous page">
<
</button>
<div id="pagination-numbers">
</div>
<button class="pagination-button" id="next-button" aria-label="Next page" title="Next page">
>
</button>
</nav>
</section>
<script>
const paginationNumbers = document.getElementById("pagination-numbers");
const paginatedList = document.querySelector(".liste-avis .results");
const listItems = paginatedList.querySelectorAll(".article");
const nextButton = document.getElementById("next-button");
const prevButton = document.getElementById("prev-button");
const paginationLimit = 10;
const pageCount = Math.ceil(listItems.length / paginationLimit);
let currentPage = 1;
const disableButton = (button) => {
button.classList.add("disabled");
button.setAttribute("disabled", true);
};
const enableButton = (button) => {
button.classList.remove("disabled");
button.removeAttribute("disabled");
};
const handlePageButtonsStatus = () => {
if (currentPage === 1) {
disableButton(prevButton);
} else {
enableButton(prevButton);
}
if (pageCount === currentPage) {
disableButton(nextButton);
} else {
enableButton(nextButton);
}
};
const handleActivePageNumber = () => {
document.querySelectorAll(".pagination-number").forEach((button) => {
button.classList.remove("active");
const pageIndex = Number(button.getAttribute("page-index"));
if (pageIndex == currentPage) {
button.classList.add("active");
}
});
};
const appendPageNumber = (index) => {
const pageNumber = document.createElement("button");
pageNumber.className = "pagination-number";
pageNumber.innerHTML = index;
pageNumber.setAttribute("page-index", index);
pageNumber.setAttribute("aria-label", "Page " + index);
paginationNumbers.appendChild(pageNumber);
};
const getPaginationNumbers = () => {
for (let i = 1; i <= pageCount; i++) {
appendPageNumber(i);
}
};
const setCurrentPage = (pageNum) => {
currentPage = pageNum;
handleActivePageNumber();
handlePageButtonsStatus();
const prevRange = (pageNum - 1) * paginationLimit;
const currRange = pageNum * paginationLimit;
listItems.forEach((item, index) => {
item.classList.add("d-none");
if (index >= prevRange && index < currRange) {
item.classList.remove("d-none");
}
});
};
window.addEventListener("load", () => {
getPaginationNumbers();
setCurrentPage(1);
prevButton.addEventListener("click", () => {
setCurrentPage(currentPage - 1);
});
nextButton.addEventListener("click", () => {
setCurrentPage(currentPage + 1);
});
document.querySelectorAll(".pagination-number").forEach((button) => {
const pageIndex = Number(button.getAttribute("page-index"));
if (pageIndex) {
button.addEventListener("click", () => {
setCurrentPage(pageIndex);
});
}
});
});
</script>
{% endif %}
{% endif %}