Symfony Profiler

{% extends "layout.html.twig" %}
{% block contentBody %}
{% set title = content.title %}
{% if step != "annulation" %}
<div class="bg-white kl-block-nav">
<div class="kl-top-nav">
{% if step != "confirmation" %}
<a href="{{ step == "choice" or step == "" ? '/' : (referer is defined and referer is not empty ? referer : '/')}}" class="kl-step-return"><i>← Retour à l'étape précédente</i></a>
{% endif %}
<ul class="kl-step-menu mb-0">
<li class="{{ step == "choice" or step == "" ? 'active' : ''}}"><a href="{{ step == 'recap' ? '?step=choice' : '#choice'}}" {{ step == "confirmation" ? 'onclick="return false"' : ''}}>Choix de la formule</a></li>
<li class="{{ step == "recap" and datas.commandes is defined ? 'active' : ''}}"><a href="{{ step == "choice" ? '?step=recap' : '#recap'}}" {{ step == "choice" or step == "confirmation" ? 'onclick="return false"' : ''}}>Récapitulatif</a></li>
<li class=""><a href="#paiement" onclick="return false">Paiement</a></li>
<li class="{{ step == "confirmation" ? 'active' : ''}}"><a href="#confirmation" onclick="return false">Confirmation</a></li>
</ul>
</div>
</div>
{% endif %}
<div class=" max-container-3 block-texte mx-auto px-0 pb-lg-4">
<div class="row titre-details mt-4">
{% if step != "confirmation" and step != "annulation" %}
<div class="col-md-12"><h2 class="mb-3">{{ title }} : </h2></div>
{% endif %}
{% if datas.commandes is defined and datas.commandes is not empty and datas.paymentForm is defined %}
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-12" id="id_liste">
<table class="table table-striped table-hover">
<thead class="thead-dark">
<tr>
<th>Désignation</th>
<th>Qté</th>
<th class="text-right">PU</th>
<th class="text-right">Montant</th>
<th></th>
</tr>
</thead>
<tbody>
{% set total = 0 %}
{% for commandeItem in datas.commandes %}
{% set montant = commandeItem.qte * tarifs[commandeItem.tarif_id].pu %}
{% set total = total + montant %}
<tr data-id="{{commandeItem.getId()}}">
<td>{{ tarifs[commandeItem.tarif_id].description }}</td>
<td>{{commandeItem.qte}}{{tarifs[commandeItem.tarif_id].titre == 'SDR' ? 'h' : ''}}</td>
<td class="text-right">{{tarifs[commandeItem.tarif_id].pu}} €</td>
<td class="text-right"><span class="kl_montant">{{montant}}</span> €</td>
<td>
<a href="#" class="kl-delete-cmd text-danger" title="Supprimer ce commande">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
{% endfor %}
<tr class="bg-white">
<th class="text-right" colspan=3>Total HT</th>
<th class="text-right"><span id="idTotalHt">{{total}}</span> €</th>
<th></th>
</tr>
<tr class="bg-white">
<th class="text-right" colspan=3>TVA</th>
<th class="text-right"><span id="idTva">{{total * 0.2}}</span> €</th>
<th></th>
</tr>
<tr class="bg-white">
<th class="text-right" colspan=3>TTC</th>
<th class="text-right"><span id="idTotalTtc">{{total + total * 0.2}}</span> €</th>
<th></th>
</tr>
</tbody>
</table>
<div class="text-center">
{{ datas.paymentForm|raw }}
</div>
</div>
</div>
</div>
</div>
</div>
{% else %}
<div class="col-md-7">
<form method="POST" id="idFormCmd" action="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}">
{% for item in tarifs %}
<div class="card mb-3 kl-tarif" data-id="{{ item.id }}">
<div class="card-body d-flex">
<figcaption class="kl-img-illustration">
<img src="{{ item.logo }}" alt="{{ item.titre }}">
</figcaption>
<article class="mt-a mb-a">
<h5 class="card-title">{{ item.description }}</h5>
<p class="mb-0">Quantité :
<input type="number"
inputmode="numeric"
pattern="[0-9]*"
name="data[{{ item.id }}]"
data-tp="{{ item.titre == 'SDR' ? 'h' : ''}}"
data-id="{{ item.id }}"
data-price="{{ item.pu }}"
min="0"
value=""
placeholder="0"
class="kl-formInput form-control kl-inputReserve">
<span class="ml-3">Tarif :
<strong>
<span class="kl-price hide">0</span>
<span class="kl-prices">{{ item.pu }}</span> €
</strong>
</span>
</p>
{% if item.id == '4' %}
<p class="mb-2">
<a href="#" data-bs-toggle="modal" data-bs-target="#calendarModal" class="kl-step-return">
<i>Voir les disponibilités</i>
</a>
</p>
{% endif %}
</article>
</div>
</div>
{% endfor %}
</form>
</div>
<div class="col-md-5">
<div class="card">
<div class="card-body">
<h5 class="text-center">Résumé</h5>
{% for item in tarifs %}
<p class="mb-0 txt-gris hide" id="idResume{{ item.id }}"><em><span class="kl_cmd"></span> {{item.description}} </em></p>
{% endfor %}
<hr class="mb-10 mt-10">
<p class="mb-0 clearfix">Total HT : <strong class="float-right txt-green font-size-16"><span id="totalHt">0</span> €</strong></p>
<hr class="mb-10 mt-10">
<p class="clearfix">Total TTC : <strong class="float-right"><span id="totalTtc">0</span> €</strong></p>
<p><em class="text-muted">En commandant j'accepte les conditions générales de vente</em></p>
<button type="button" class="btn btn-link transition-bgcolor bg-green-s minw-sm btn-block disabled" id="idButtonCmd">COMMANDER</button>
<p class="text-muted text-center mt-3 mb-0">Paiement sécurisé</p>
</div>
</div>
<div class="card mt-3 bg-green-avocate">
<div class="card-body">
<h5 class="txt-white">Vous souhaitez<br/> un abonnement personnalisé ?</h5>
<div class="row">
<div class="col-md-6">
<h4 class="txt-green mb-0">04 51 58 08 05</h4>
<small class="fs-12 txt-white">Du lundi au vendredi de 9h à 18h</small>
</div>
<div class="col-md-6 text-right m-a">
<a class="btn btn-small-link" href="/contact">Contact</a>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
<div class="modal fade" id="calendarModal" tabindex="-1" aria-labelledby="calendarModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="calendarModalLabel">Créneaux disponibles</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body" id="calendar-content">
{% include 'front/disponibilites_fragment.html.twig' %}
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="{{ asset('/assets/js/custom.js?v1') }}"></script>
<script src="{{ asset('/assets/js/client/commande.js?v9') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
{% block javascripts %}
{{ parent() }}
<script>
const days = {{ dates|json_encode|raw }};
const reservations = {{ reservations|json_encode|raw }};
function generateCalendar(reservations, days) {
const calendarBody = document.getElementById('calendar-body');
if (!calendarBody) return;
const hours = ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00"];
const now = new Date();
const isMobile = window.innerWidth <= 768;
calendarBody.innerHTML = "";
hours.forEach(hour => {
const row = document.createElement('tr');
row.innerHTML = `<td>${hour}</td>`;
days.forEach(day => {
const reservationForDay = reservations[day] || [];
const reservation = reservationForDay.find(res => res.time === hour);
const td = document.createElement('td');
const reservationDateTime = new Date(`${day}T${hour}:00`);
let text = "";
if (reservationDateTime <= now) {
if (reservation) {
td.className = "past-reserved";
text = "Réservé";
} else {
td.className = "past";
text = "Indisponible";
}
td.style.pointerEvents = "none";
} else if (reservation) {
td.className = "reserved alias";
text = "Réservé";
} else {
td.className = "available";
text = "Disponible";
}
if (!isMobile) {
td.textContent = text;
}
row.appendChild(td);
});
calendarBody.appendChild(row);
});
}
// Appel initial
document.addEventListener("DOMContentLoaded", function () {
generateCalendar(reservations, days);
});
// Pagination calendrier (changer de semaine)
document.addEventListener("click", function (e) {
const target = e.target.closest(".change-week");
if (target) {
e.preventDefault();
const date = target.dataset.date;
fetch(`/reservation?d=${date}&modal=1`)
.then(res => res.text())
.then(html => {
document.getElementById("calendar-content").innerHTML = html;
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
const newScript = doc.querySelector("script[data-calendar-json]");
if (newScript) {
const data = JSON.parse(newScript.textContent);
generateCalendar(data.reservations, data.dates);
}
});
}
});
</script>
{% endblock %}
{% endblock %}

templates/front/reserver.html.twig line 1