Symfony Profiler

{% extends 'backfront.html.twig' %}
{% block title %}Formations SIP Academy - Java, Python, DevOps, Agile et Plus{% endblock %}
{% block body %}


<style>
/* Style global */
.certificates-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Conteneur avec scroll masqué */
.certificates-container {
overflow-x: hidden; /* Masque le scroll */
white-space: nowrap;
width: 80%; /* Ajuste la largeur selon ton design */
padding-bottom: 10px;
scroll-behavior: smooth;
}
.certificates-scroll {
display: flex;
gap: 15px;
}
/* Style des cartes */
.certificate-card {
flex: 0 0 auto;
width: 220px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: center;
}
.certificate-card img {
width: 100%;
height: 140px;
object-fit: cover;
border-bottom: 3px solid #1c3263;
}
.certificate-info {
padding: 10px;
}
/* Boutons de navigation */
.scroll-btn {
background-color: #1c3263;
color: white;
border: none;
padding: 10px 15px;
font-size: 15px;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.scroll-btn.left {
left: 0;
}
.scroll-btn.right {
right: 0;
}
/* Effet au survol */
.scroll-btn:hover {
background-color: #0e2149;
}
</style>


<div class="course-details-area section-padding">
<div class="container">
<div class="row">
<div class="col-lg-8 col--12">
<div class="course-details-right-sidebar">
<div class="events-details-img1 img-full">
<h3>{{formation.titre }}</h3>
<img alt="" src="{{asset('uploads/formation/'~ formation.affiche )}}">
</div>
<div class="single-item-content">
<div class="single-item-comment-view">
<span><svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24"><path fill="#000" d="M3 19V5h18v14zm5.5-2.5h1v-1h1.23q.328 0 .549-.221t.221-.548v-2.462q0-.327-.221-.548t-.548-.221H7.5v-2h4v-1h-2v-1h-1v1H7.27q-.328 0-.549.221T6.5 9.27v2.462q0 .327.221.548t.548.221H10.5v2h-4v1h2zm7.5-.52l1.539-1.538H14.46zm-1.538-6.172h3.077L16 8.269z"/></svg>{{formation.prix }}DT</span>
{# <span><i class="zmdi zmdi-favorite"></i>{{formation.nblike }}</span>#}
</div>
<div class="single-item-rating">
<i class="zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
<div class="about-lectures">
<h3>Description</h3>
{{ formation.description|raw }}
</div>
<div class="about-lectures">
<h3>Programme</h3>
{{ formation.programme|raw }}
</div>
{% if sections != null %}
<div class="course-duration mb-30">
<div class="duration-title">
<div class="text"><span>Sections</span> <span class="text-right"> Durée</span></div>
</div>
<div class="duration-text">
{% for section in sections %}
<div class="text"><span style="width: 300px">{{ section.titre }}</span> <span class="text-right">{{ section.duree }}</span></div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% if certifs %}
<div class="certificates-area section-padding" style="margin-top: -50px">
<div class="container">
<h3 class="mb-4 ">🏆 Certificates</h3>
<div class="certificates-wrapper">

{% if certifs|length > 2 %}
<button class="scroll-btn left" onclick="scrollCertificates(-1)">◀</button>
{% endif %}

<div class="certificates-container">
<div class="certificates-scroll">
{% for certif in certifs %}
<div class="certificate-card">
<img src="{{ asset('uploads/elearning/' ~ certif.image) }}" alt="Certificat de {{ certif.prenom }} {{ certif.nom }}">
<div class="certificate-info">
<h5>{{ certif.prenom }} {{ certif.nom }}</h5>
<p class="text-muted">{{ certif.date|date('d M Y') }}</p>
</div>
</div>
{% else %}
<p class="text-center w-100">Aucun certificat disponible pour cette formation.</p>
{% endfor %}
</div>
</div>

{% if certifs|length > 2 %}
<button class="scroll-btn right" onclick="scrollCertificates(1)">▶</button>
{% endif %}
</div>
</div>
</div>
<script>
function scrollCertificates(direction) {
const container = document.querySelector(".certificates-container");
const scrollAmount = 250; // Distance de défilement
container.scrollLeft += direction * scrollAmount;
}
</script>
{% endif %}
{% if temoignages %}
<div class="testimonial-area" style="margin-top: -50px">
<div class="container">
<div class="row">
<div class="testimonial-slider-2 owl-carousel">
{% for temoii in temoignages %}
<div class="col-12">
<div class="single-testimonial testimonial-style-2">
<div class="des-testimonial">
{{ temoii.description }} </div>
<div class="testimonial-author">
<div class="author-img">
<img src="{{ asset('uploads/temoignage/' ~ temoii.image ) }}" alt="" style="width: 100%;height: 100%" >
</div>
<div class="author-content">
<h5>{{ temoii.prenom }} {{ temoii.nom }}   </h5>
<p>{{ temoii.poste }}</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}



</div>

<div class="col-lg-4">
<div class="sidebar-widget">
<div style="margin-bottom: 25px" class="course-sidebar p-3 bg-white rounded shadow">
{% if formation.video %}
<h5 class=" font-weight-bold mb-3">🎥 Aperçu du cours</h5>
<div class="course-video mb-3">
<video width="100%" controls class="rounded shadow">
<source src="{{ asset('uploads/elearning/' ~ formation.video) }}" type="video/mp4">
Votre navigateur ne supporte pas la lecture des vidéos.
</video>
</div>
{% endif %}

<div class="text-center">
<h4 class=" text-danger font-weight-bold mb-3">{{ formation.prix }} DT</h4>
<button style="font-size: 15px; background-color: #1c3263;color: white" data-id="{{ formation.id }}" class="btn-ajout-panier btn btn-lg w-100 rounded-pill shadow-sm">
🛒 Ajouter au panier
</button>
</div>
</div>
{% if evenements %}
<div class="single-sidebar-widget">
<h4 class="title">Prochaines Sessions</h4>
<div class="recent-content">
{% for evenement in evenements|sort|reverse %}
<div class="recent-content-item">
<a href="{{ path('app_details_session',{'slug':evenement.slug}) }}">
{% if evenement.image %}
<img alt="" style="width: 70px;height: 65px" src="{{asset('uploads/evenement/'~ evenement.image )}}">
{% else %}
<img alt="" style="width: 70px;height: 65px" src="{{asset('uploads/formation/'~ evenement.formation.affiche )}}">
{% endif %}
</a>
<div class="recent-text">
<h4><a href="{{ path('app_details_session',{'slug':evenement.slug}) }}">{{ evenement.titre }}</a></h4>
<div class="single-item-comment-view">
<span><i class="zmdi zmdi-time"></i>{{ evenement.starttime |date('d M H:i') }}</span>
<span><i class="zmdi zmdi-time"></i>{{ evenement.endtime |date('d M H:i') }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
<div class="single-sidebar-widget">
<h4 class="title">Anciennes Sessions</h4>
<div class="recent-content">
{% for evenement in ancienevents|sort|reverse %}
<div class="recent-content-item">
<a href="{{ path('app_details_session',{'slug':evenement.slug}) }}">
{% if evenement.image %}
<img alt="" style="width: 70px;height: 65px" src="{{asset('uploads/evenement/'~ evenement.image )}}">
{% else %}
<img alt="" style="width: 70px;height: 65px" src="{{asset('uploads/formation/'~ evenement.formation.affiche )}}">
{% endif %}
</a>
<div class="recent-text">
<h4><a href="{{ path('app_details_session',{'slug':evenement.slug}) }}">{{ evenement.titre }}</a></h4>
<div class="single-item-comment-view">
<span><i class="zmdi zmdi-time"></i>{{ evenement.starttime |date('d M H:i') }}</span>
<span><i class="zmdi zmdi-time"></i>{{ evenement.endtime |date('d M H:i') }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="single-sidebar-widget">
<h4 class="title">Dernières Actualités</h4>
<div class="recent-content">
{% for actualite in actualites %}
<div class="recent-content-item">
<a href="{{ path('app_details_actualite',{'slug':actualite.slug}) }}"><img src="{{asset('uploads/actualite/'~ actualite.image )}}" style="width: 70px;height: 65px" alt=""></a>
<div class="recent-text">
<h4><a href="{{ path('app_details_actualite',{'slug':actualite.slug}) }}">{{ actualite.titre }}</a></h4>
<a class="single-item-comment-view" style="height: 20px;margin-bottom: 0px;color: darkblue;font-size: 13px"
href="{{ path('app_details_actualite',{'slug':actualite.slug}) }}"
>Lire la suite</a>
<div class="single-item-comment-view">
<span><i class="zmdi zmdi-eye"></i>{{ actualite.nbvue }}</span>
<span><i class="zmdi zmdi-comments"></i>{{ actualite.nbcommentaire }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{# <div class="single-sidebar-widget">#}
{# <h4 class="title">Recent Course</h4>#}
{# <div class="recent-content">#}
{# <div class="recent-content-item">#}
{# <a href="#"><img src="img/event/7.jpg" alt=""></a>#}
{# <div class="recent-text">#}
{# <h4><a href="#">Learn English in</a></h4>#}
{# <div class="single-item-comment-view">#}
{# <span><i class="zmdi zmdi-eye"></i>59</span>#}
{# <span><i class="zmdi zmdi-comments"></i>19</span>#}
{# </div>#}
{# <p>There are many varf passages of Lorem Ipsuable,amar</p>#}
{# </div>#}
{# </div>#}
{# <div class="recent-content-item">#}
{# <a href="#"><img src="img/event/8.jpg" alt=""></a>#}
{# <div class="recent-text">#}
{# <h4><a href="#">Team Works</a></h4>#}
{# <div class="single-item-comment-view">#}
{# <span><i class="zmdi zmdi-eye"></i>59</span>#}
{# <span><i class="zmdi zmdi-comments"></i>19</span>#}
{# </div>#}
{# <p>There are many varf passages of Lorem Ipsuable,amar</p>#}
{# </div>#}
{# </div>#}
{# <div class="recent-content-item">#}
{# <a href="#"><img src="img/event/9.jpg" alt=""></a>#}
{# <div class="recent-text">#}
{# <h4><a href="#">Learn With Fun</a></h4>#}
{# <div class="single-item-comment-view">#}
{# <span><i class="zmdi zmdi-eye"></i>59</span>#}
{# <span><i class="zmdi zmdi-comments"></i>19</span>#}
{# </div>#}
{# <p>There are many varf passages of Lorem Ipsuable,amar</p>#}
{# </div>#}
{# </div>#}
{# <div class="recent-content-item">#}
{# <a href="#"><img src="img/event/10.jpg" alt=""></a>#}
{# <div class="recent-text">#}
{# <h4><a href="#">Writing Skill</a></h4>#}
{# <div class="single-item-comment-view">#}
{# <span><i class="zmdi zmdi-eye"></i>59</span>#}
{# <span><i class="zmdi zmdi-comments"></i>19</span>#}
{# </div>#}
{# <p>There are many varf passages of Lorem Ipsuable,amar</p>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="single-sidebar-widget">#}
{# <h4 class="title">Search by Tags</h4>#}
{# <ul class="tags">#}
{# <li><a href="#">Photoshop</a></li>#}
{# <li><a href="#">Design</a></li>#}
{# <li><a href="#">Tutorial</a></li>#}
{# <li><a href="#">Courses</a></li>#}
{# <li><a href="#">Premium</a></li>#}
{# <li><a href="#">Designtuto</a></li>#}
{# </ul>#}
{# </div>#}
{# #}
</div>
</div>
</div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const cartCount = document.getElementById('cart-count');
document.querySelectorAll('.btn-ajout-panier').forEach(button => {
button.addEventListener('click', () => {
const formationId = button.dataset.id;
fetch(`/panier/ajouter/${formationId}`, {
method: 'POST',
headers: { 'X-Requested-With': 'XMLHttpRequest' }
})
.then(response => response.json())
.then(data => {
if (data.status === 'ok') {
// 1) Mettre à jour le compteur
cartCount.textContent = data.total_items;
// 2) Afficher SweetAlert de succès
Swal.fire({
icon: 'success',
title: 'Ajouté !',
text: data.message,
timer: 1500,
showConfirmButton: false
});
// 3) Désactiver le bouton pour ne plus pouvoir cliquer
button.disabled = true;
} else if (data.status === 'already_in_cart') {
// Formation déjà dans le panier
Swal.fire({
icon: 'info',
title: 'Déjà au panier',
text: data.message
});
// Optionnel : vous pouvez désactiver le bouton aussi
button.disabled = true;
} else {
// Erreur générale
Swal.fire({
icon: 'error',
title: 'Erreur',
text: data.message ?? 'Erreur lors de l’ajout au panier.'
});
}
})
.catch(() => {
Swal.fire({
icon: 'error',
title: 'Erreur réseau',
text: 'Impossible d’ajouter la formation.'
});
});
});
});
});
</script>
{% endblock %}

templates/formation_elearning/detailsFront.html.twig line 1