templates/formation_elearning/formationFront.html.twig line 1

Open in your IDE?
  1. {% extends 'backfront.html.twig' %}
  3. {% block title %}Formations E-learning SIP Academy - Apprenez en ligne à votre rythme{% endblock %}
  5. {% block meta_description %}
  6.     Découvrez nos formations E-learning chez SIP Academy. Apprenez en ligne à votre rythme avec nos cours certifiants et formateurs experts.
  7. {% endblock %}
  9. {% block body %}
  10.     <style>
  11.         /* ===== COULEURS MODERNES ===== */
  12.         :root {
  13.             --gold: #FFAE27;
  14.             --gold-dark: #e09500;
  15.             --gold-light: #fff8e6;
  16.             --navy: #1F3971;
  17.             --navy-dark: #162d5a;
  18.             --navy-light: #e8edf8;
  19.             --text-dark: #1a2a3a;
  20.             --text-muted: #6c757d;
  21.             --border-light: #eef2f6;
  22.         }
  24.         /* ===== BREADCRUMB MODERNE ===== */
  25.         .breadcrumb-area {
  26.             background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  27.             padding: 100px 0 120px;
  28.             position: relative;
  29.             text-align: center;
  30.         }
  31.         .breadcrumb-title h1 {
  32.             color: #fff;
  33.             font-size: 48px;
  34.             font-weight: 800;
  35.             margin-bottom: 10px;
  36.             letter-spacing: -1px;
  37.         }
  38.         .breadcrumb-list {
  39.             list-style: none;
  40.             padding: 0;
  41.             margin: 0;
  42.             display: flex;
  43.             justify-content: center;
  44.             gap: 15px;
  45.             align-items: center;
  46.         }
  47.         .breadcrumb-list li, .breadcrumb-list li a {
  48.             color: rgba(255,255,255,0.7);
  49.             font-size: 15px;
  50.             text-decoration: none;
  51.             transition: color 0.3s;
  52.         }
  53.         .breadcrumb-list li a:hover {
  54.             color: var(--gold);
  55.         }
  56.         .breadcrumb-list li.active {
  57.             color: var(--gold);
  58.         }
  59.         .breadcrumb-list li i {
  60.             font-size: 14px;
  61.             color: var(--gold);
  62.         }
  64.         /* ===== SECTION TITRES ===== */
  65.         .section-title-wrapper {
  66.             text-align: center;
  67.             margin-bottom: 50px;
  68.         }
  69.         .section-title h3 {
  70.             font-size: 36px;
  71.             font-weight: 800;
  72.             color: var(--text-dark);
  73.             margin-bottom: 12px;
  74.             position: relative;
  75.             display: inline-block;
  76.         }
  77.         .section-title h3::after {
  78.             content: '';
  79.             position: absolute;
  80.             bottom: -12px;
  81.             left: 50%;
  82.             transform: translateX(-50%);
  83.             width: 60px;
  84.             height: 4px;
  85.             background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  86.             border-radius: 2px;
  87.         }
  88.         .section-title p {
  89.             font-size: 16px;
  90.             color: var(--text-muted);
  91.             margin-top: 20px;
  92.         }
  94.         /* ===== COURSE AREA ===== */
  95.         .course-area {
  96.             padding: 80px 0;
  97.             background: #fff;
  98.         }
  100.         /* CARTE FORMATION - HAUTEUR ÉGALE */
  101.         .single-item {
  102.             background: #fff;
  103.             border-radius: 20px;
  104.             overflow: hidden;
  105.             box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  106.             transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  107.             height: 100%;
  108.             display: flex;
  109.             flex-direction: column;
  110.             border: 1px solid var(--border-light);
  111.         }
  112.         .single-item:hover {
  113.             transform: translateY(-8px);
  114.             box-shadow: 0 20px 40px rgba(31,57,113,0.15);
  115.             border-color: var(--gold);
  116.         }
  118.         /* IMAGE */
  119.         .single-item-image {
  120.             position: relative;
  121.             overflow: hidden;
  122.             height: 220px;
  123.             background: linear-gradient(135deg, #f8faff 0%, #fff 100%);
  124.             display: flex;
  125.             align-items: center;
  126.             justify-content: center;
  127.         }
  128.         .single-item-image a {
  129.             display: flex;
  130.             align-items: center;
  131.             justify-content: center;
  132.             width: 100%;
  133.             height: 100%;
  134.         }
  135.         .single-item-image img {
  136.             width: auto;
  137.             height: auto;
  138.             max-width: 100%;
  139.             max-height: 100%;
  140.             object-fit: contain;
  141.             transition: transform 0.4s ease;
  142.         }
  143.         .single-item:hover .single-item-image img {
  144.             transform: scale(1.05);
  145.         }
  147.         /* OVERLAY HOVER */
  148.         .overlay-effect {
  149.             position: relative;
  150.         }
  151.         .courses-hover-info {
  152.             position: absolute;
  153.             bottom: -100%;
  154.             left: 0;
  155.             right: 0;
  156.             background: linear-gradient(135deg, rgba(31,57,113,0.95), rgba(22,45,90,0.95));
  157.             padding: 15px;
  158.             transition: bottom 0.3s ease;
  159.             backdrop-filter: blur(5px);
  160.             z-index: 10;
  161.         }
  162.         .single-item:hover .courses-hover-info {
  163.             bottom: 0;
  164.         }
  165.         .courses-hover-action {
  166.             display: flex;
  167.             align-items: center;
  168.             gap: 12px;
  169.             flex-wrap: wrap;
  170.         }
  171.         .courses-hover-thumb img {
  172.             width: 40px;
  173.             height: 40px;
  174.             border-radius: 50%;
  175.             object-fit: cover;
  176.             border: 2px solid var(--gold);
  177.         }
  178.         .courses-hover-action h4 a {
  179.             color: #fff;
  180.             font-size: 14px;
  181.             font-weight: 600;
  182.             text-decoration: none;
  183.         }
  184.         .courses-hover-action h4 a:hover {
  185.             color: var(--gold);
  186.         }
  187.         .crs-separator {
  188.             color: var(--gold);
  189.         }
  190.         .courses-hover-action p {
  191.             color: rgba(255,255,255,0.8);
  192.             font-size: 11px;
  193.             margin: 0;
  194.         }
  196.         /* CORPS DE LA CARTE */
  197.         .single-item-text {
  198.             padding: 20px;
  199.             flex: 1;
  200.             display: flex;
  201.             flex-direction: column;
  202.         }
  203.         .single-item-text h4 {
  204.             font-size: 18px;
  205.             font-weight: 700;
  206.             margin-bottom: 12px;
  207.             line-height: 1.4;
  208.             min-height: 50px;
  209.         }
  210.         .single-item-text h4 a {
  211.             color: var(--text-dark);
  212.             text-decoration: none;
  213.             transition: color 0.2s;
  214.         }
  215.         .single-item-text h4 a:hover {
  216.             color: var(--gold);
  217.         }
  219.         /* DESCRIPTION */
  220.         .single-item-text > p {
  221.             font-size: 13px;
  222.             color: var(--text-muted);
  223.             line-height: 1.6;
  224.             margin-bottom: 16px;
  225.             display: -webkit-box;
  226.             -webkit-line-clamp: 2;
  227.             -webkit-box-orient: vertical;
  228.             overflow: hidden;
  229.         }
  231.         /* INFOS CARTE (PRIX + PANIER) */
  232.         .single-item-content {
  233.             display: flex;
  234.             justify-content: space-between;
  235.             align-items: center;
  236.             margin-top: auto;
  237.             padding-top: 15px;
  238.             border-top: 1px solid var(--border-light);
  239.         }
  240.         .single-item-comment-view {
  241.             display: flex;
  242.             gap: 15px;
  243.             align-items: center;
  244.         }
  245.         .single-item-comment-view span {
  246.             font-size: 18px;
  247.             font-weight: 700;
  248.             color: var(--gold);
  249.             display: flex;
  250.             align-items: center;
  251.             gap: 5px;
  252.         }
  253.         .single-item-comment-view span svg {
  254.             width: 24px;
  255.             height: 24px;
  256.         }
  257.         .single-item-comment-view span svg path {
  258.             fill: var(--gold);
  259.         }
  261.         /* BOUTON PANIER */
  262.         .btn-ajout-panier {
  263.             background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  264.             border: none;
  265.             color: white;
  266.             padding: 10px 15px;
  267.             border-radius: 12px;
  268.             transition: all 0.3s ease;
  269.             cursor: pointer;
  270.             display: flex;
  271.             align-items: center;
  272.             justify-content: center;
  273.         }
  274.         .btn-ajout-panier:hover {
  275.             background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  276.             transform: translateY(-2px);
  277.             box-shadow: 0 4px 12px rgba(255,174,39,0.3);
  278.         }
  279.         .btn-ajout-panier svg {
  280.             width: 22px;
  281.             height: 22px;
  282.         }
  283.         .btn-ajout-panier svg path {
  284.             fill: #fff;
  285.             transition: fill 0.3s ease;
  286.         }
  287.         .btn-ajout-panier:hover svg path {
  288.             fill: var(--navy);
  289.         }
  290.         .btn-ajout-panier:disabled {
  291.             opacity: 0.5;
  292.             cursor: not-allowed;
  293.             transform: none;
  294.         }
  296.         /* MESSAGE AUCUNE FORMATION */
  297.         .no-formations-message {
  298.             text-align: center;
  299.             padding: 60px 40px;
  300.             background: #fff;
  301.             border-radius: 24px;
  302.             border: 1px solid var(--border-light);
  303.             box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  304.             max-width: 500px;
  305.             margin: 0 auto;
  306.         }
  307.         .no-formations-icon {
  308.             font-size: 64px;
  309.             color: var(--gold);
  310.             margin-bottom: 20px;
  311.         }
  312.         .no-formations-message h3 {
  313.             font-size: 24px;
  314.             font-weight: 700;
  315.             color: var(--text-dark);
  316.             margin-bottom: 12px;
  317.         }
  318.         .no-formations-message p {
  319.             font-size: 15px;
  320.             color: var(--text-muted);
  321.             margin-bottom: 25px;
  322.         }
  324.         /* PAGINATION */
  325.         .pagination-wrapper {
  326.             margin-top: 40px;
  327.             text-align: center;
  328.         }
  329.         .pagination {
  330.             display: flex;
  331.             justify-content: center;
  332.             gap: 8px;
  333.             list-style: none;
  334.             padding: 0;
  335.             margin: 0;
  336.         }
  337.         .pagination .page-item {
  338.             list-style: none;
  339.         }
  340.         .pagination .page-link {
  341.             display: flex;
  342.             align-items: center;
  343.             justify-content: center;
  344.             width: 40px;
  345.             height: 40px;
  346.             border-radius: 12px;
  347.             background: #fff;
  348.             border: 1px solid var(--border-light);
  349.             color: var(--navy);
  350.             font-weight: 500;
  351.             text-decoration: none;
  352.             transition: all 0.3s ease;
  353.         }
  354.         .pagination .page-link:hover {
  355.             background: var(--gold);
  356.             border-color: var(--gold);
  357.             color: var(--navy);
  358.         }
  359.         .pagination .active .page-link {
  360.             background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  361.             border-color: var(--navy);
  362.             color: #fff;
  363.         }
  365.         /* RESPONSIVE */
  366.         @media (max-width: 768px) {
  367.             .section-title h3 {
  368.                 font-size: 28px;
  369.             }
  370.             .single-item-image {
  371.                 height: 180px;
  372.             }
  373.             .single-item-text h4 {
  374.                 font-size: 16px;
  375.                 min-height: auto;
  376.             }
  377.             .pagination .page-link {
  378.                 width: 36px;
  379.                 height: 36px;
  380.                 font-size: 13px;
  381.             }
  382.             .breadcrumb-title h1 {
  383.                 font-size: 32px;
  384.             }
  385.             .single-item-comment-view span {
  386.                 font-size: 16px;
  387.             }
  388.         }
  390.         @media (max-width: 576px) {
  391.             .single-item-comment-view span svg {
  392.                 width: 20px;
  393.                 height: 20px;
  394.             }
  395.             .btn-ajout-panier {
  396.                 padding: 8px 12px;
  397.             }
  398.             .btn-ajout-panier svg {
  399.                 width: 18px;
  400.                 height: 18px;
  401.             }
  402.         }
  403.         /* Informations formateur dans la carte */
  404.         .formateur-info {
  405.             display: flex;
  406.             align-items: center;
  407.             gap: 12px;
  408.             margin-bottom: 15px;
  409.             padding: 10px;
  410.             background: var(--navy-light);
  411.             border-radius: 12px;
  412.             transition: all 0.3s ease;
  413.         }
  415.         .single-item:hover .formateur-info {
  416.             background: rgba(255,174,39,0.1);
  417.             transform: translateX(5px);
  418.         }
  420.         .formateur-avatar img {
  421.             width: 40px;
  422.             height: 40px;
  423.             border-radius: 50%;
  424.             object-fit: cover;
  425.             border: 2px solid var(--gold);
  426.         }
  428.         .formateur-details {
  429.             display: flex;
  430.             flex-direction: column;
  431.         }
  433.         .formateur-name {
  434.             font-size: 13px;
  435.             font-weight: 700;
  436.             color: var(--text-dark);
  437.         }
  439.         .formateur-poste {
  440.             font-size: 11px;
  441.             color: var(--text-muted);
  442.         }
  444.         /* ===== TOAST NOTIFICATIONS STYLE ===== */
  445.         .toast-notification {
  446.             position: fixed;
  447.             bottom: 30px;
  448.             right: 30px;
  449.             z-index: 9999;
  450.             min-width: 320px;
  451.             max-width: 400px;
  452.             background: white;
  453.             border-radius: 16px;
  454.             box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  455.             padding: 0;
  456.             overflow: hidden;
  457.             animation: slideInRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  458.             border-left: 4px solid;
  459.         }
  461.         @keyframes slideInRight {
  462.             from {
  463.                 transform: translateX(100%);
  464.                 opacity: 0;
  465.             }
  466.             to {
  467.                 transform: translateX(0);
  468.                 opacity: 1;
  469.             }
  470.         }
  472.         .toast-notification.toast-success {
  473.             border-left-color: #28a745;
  474.         }
  475.         .toast-notification.toast-success .toast-header {
  476.             background: linear-gradient(135deg, #28a745, #20c997);
  477.         }
  478.         .toast-notification.toast-success .toast-icon i {
  479.             color: #28a745;
  480.         }
  482.         .toast-notification.toast-info {
  483.             border-left-color: #17a2b8;
  484.         }
  485.         .toast-notification.toast-info .toast-header {
  486.             background: linear-gradient(135deg, #17a2b8, #6f42c1);
  487.         }
  488.         .toast-notification.toast-info .toast-icon i {
  489.             color: #17a2b8;
  490.         }
  492.         .toast-notification.toast-error {
  493.             border-left-color: #dc3545;
  494.         }
  495.         .toast-notification.toast-error .toast-header {
  496.             background: linear-gradient(135deg, #dc3545, #c82333);
  497.         }
  498.         .toast-notification.toast-error .toast-icon i {
  499.             color: #dc3545;
  500.         }
  502.         .toast-notification.toast-warning {
  503.             border-left-color: #ffc107;
  504.         }
  505.         .toast-notification.toast-warning .toast-header {
  506.             background: linear-gradient(135deg, #ffc107, #fd7e14);
  507.         }
  509.         .toast-content {
  510.             display: flex;
  511.             align-items: center;
  512.             padding: 16px;
  513.             gap: 12px;
  514.         }
  516.         .toast-icon {
  517.             flex-shrink: 0;
  518.             width: 40px;
  519.             height: 40px;
  520.             background: rgba(0,0,0,0.05);
  521.             border-radius: 50%;
  522.             display: flex;
  523.             align-items: center;
  524.             justify-content: center;
  525.         }
  527.         .toast-icon i {
  528.             font-size: 20px;
  529.         }
  531.         .toast-text {
  532.             flex: 1;
  533.         }
  535.         .toast-title {
  536.             font-weight: 700;
  537.             font-size: 14px;
  538.             color: #1a2a3a;
  539.             margin-bottom: 4px;
  540.         }
  542.         .toast-message {
  543.             font-size: 12px;
  544.             color: #6c757d;
  545.             line-height: 1.4;
  546.         }
  548.         .toast-close {
  549.             flex-shrink: 0;
  550.             width: 28px;
  551.             height: 28px;
  552.             border-radius: 50%;
  553.             background: rgba(0,0,0,0.05);
  554.             border: none;
  555.             cursor: pointer;
  556.             display: flex;
  557.             align-items: center;
  558.             justify-content: center;
  559.             transition: all 0.2s;
  560.         }
  562.         .toast-close:hover {
  563.             background: rgba(0,0,0,0.1);
  564.         }
  566.         .toast-close i {
  567.             font-size: 14px;
  568.             color: #6c757d;
  569.         }
  571.         .toast-progress {
  572.             height: 3px;
  573.             background: rgba(0,0,0,0.1);
  574.             width: 100%;
  575.         }
  577.         .toast-progress-bar {
  578.             height: 100%;
  579.             width: 100%;
  580.             background: linear-gradient(90deg, #FFAE27, #e09500);
  581.             animation: progress 3s linear forwards;
  582.         }
  584.         @keyframes progress {
  585.             from { width: 100%; }
  586.             to { width: 0%; }
  587.         }
  589.         /* Responsive */
  590.         @media (max-width: 576px) {
  591.             .toast-notification {
  592.                 left: 15px;
  593.                 right: 15px;
  594.                 bottom: 15px;
  595.                 min-width: auto;
  596.                 max-width: none;
  597.             }
  598.         }
  599.     </style>
  601.     <!-- BREADCRUMB AREA -->
  602.     <div class="breadcrumb-area">
  603.         <div class="container">
  604.             <div class="row">
  605.                 <div class="col-md-12">
  606.                     <div class="breadcrumb-title">
  607.                         <h1>Formations E-learning</h1>
  608.                         <ul class="breadcrumb-list">
  609.                             <li><a href="{{ path('app_home') }}">Accueil</a></li>
  610.                             <li><i class="zmdi zmdi-chevron-right"></i></li>
  611.                             <li class="active">E-learning</li>
  612.                         </ul>
  613.                     </div>
  614.                 </div>
  615.             </div>
  616.         </div>
  617.     </div>
  619.     <!-- COURSE AREA -->
  620.     <div class="course-area">
  621.         <div class="container">
  622.             <div class="row">
  623.                 <div class="col-md-12">
  624.                     <div class="section-title-wrapper">
  625.                         <div class="section-title">
  626.                             <h3>
  627.                                 {% if slug is not null %}
  628.                                     Formations : {{ categories|filter(cat => cat.slug == slug)|first.libelle }}
  629.                                 {% else %}
  630.                                     Toutes les formations E-learning
  631.                                 {% endif %}
  632.                             </h3>
  633.                             <p>Apprenez en ligne à votre rythme avec nos formations certifiantes</p>
  634.                         </div>
  635.                     </div>
  636.                 </div>
  637.             </div>
  639.             <div class="row">
  640.                 {% if formation_elearnings is empty %}
  641.                     <div class="col-md-12">
  642.                         <div class="no-formations-message">
  643.                             <div class="no-formations-icon">
  644.                                 <i class="zmdi zmdi-info-outline"></i>
  645.                             </div>
  646.                             <h3>Aucune formation disponible</h3>
  647.                             <p>De nouvelles formations seront bientôt ajoutées. Revenez prochainement !</p>
  648.                         </div>
  649.                     </div>
  650.                 {% else %}
  651.                     {% for formation in formation_elearnings %}
  652.                         <div class="col-lg-4 col-md-6 col-12 mb-4 d-flex">
  653.                             <div class="single-item w-100">
  654.                                 <div class="single-item-image overlay-effect">
  655.                                     <a href="{{ path('app_formation_detailsfrontElearning', {'slug': formation.slug}) }}">
  656.                                         <img src="{{ asset('uploads/formation/' ~ formation.affiche) }}" alt="{{ formation.titre }}">
  657.                                     </a>
  659.                                 </div>
  660.                                 <div class="single-item-text">
  661.                                     <h4><a href="{{ path('app_formation_detailsfrontElearning', {'slug': formation.slug}) }}">{{ formation.titre }}</a></h4>
  662.                                     {% if formation.formateur %}
  663.                                         <div class="formateur-info">
  664.                                             <div class="formateur-avatar">
  665.                                                 <img src="{{ asset('uploads/coach/' ~ formation.formateur.logo) }}" alt="{{ formation.formateur.prenom }}">
  666.                                             </div>
  667.                                             <div class="formateur-details">
  668.                                                 <span class="formateur-name">{{ formation.formateur.prenom }} {{ formation.formateur.nom }}</span>
  669.                                                 <span class="formateur-poste">{{ formation.formateur.poste }}</span>
  670.                                             </div>
  671.                                         </div>
  672.                                     {% endif %}
  674.                                     <p>
  678.                                         {{ formation.description|striptags|slice(0, 200)|raw }}
  679.                                         {% if formation.description|striptags|length > 200 %}...{% endif %}
  680.                                     </p>
  681.                                     <div class="single-item-content">
  682.                                         <div class="single-item-comment-view">
  683.                                             <span>
  684.                                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  685.                                                     <path d="M4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h14.77q.69 0 1.152.463T21 6.616v10.769q0 .69-.463 1.153T19.385 19zm5.884-4.5H7q-.213 0-.356.144t-.144.357t.144.356T7 15.5h1.5v.5q0 .213.144.356t.357.144t.356-.144T9.5 16v-.5h1.23q.328 0 .549-.221t.221-.548v-2.462q0-.327-.221-.548t-.548-.221H7.5v-2H11q.213 0 .356-.144t.144-.357t-.144-.356T11 8.5H9.5V8q0-.213-.145-.356q-.146-.144-.36-.144q-.203 0-.317.16q-.115.161-.178.34v.5H7.27q-.328 0-.549.221T6.5 9.27v2.462q0 .327.221.548t.548.221H10.5zm5.637 1.344l1.054-1.053q.105-.106.055-.227t-.192-.122h-2.112q-.132 0-.185.122q-.053.12.053.227l1.053 1.053q.056.056.135.056t.139-.056m-1.19-6.036h2.111q.133 0 .185-.121q.053-.121-.052-.227l-1.054-1.053q-.056-.057-.135-.057t-.138.056L14.81 9.46q-.106.106-.056.227q.05.12.192.12"/>
  686.                                                 </svg>
  687.                                                 {{ formation.prix }} DT
  688.                                             </span>
  689.                                         </div>
  690.                                         <button class="btn-ajout-panier" data-id="{{ formation.id }}">
  691.                                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  692.                                                 <path d="M1015.66 284a31.82 31.82 0 0 0-25.999-13.502h-99.744L684.78 95.666c-24.976-24.976-65.52-25.008-90.495 0L392.638 270.498h-82.096l-51.408-177.28c-20.16-69.808-68.065-77.344-87.713-77.344H34.333c-17.568 0-31.776 14.224-31.776 31.776S16.78 79.425 34.332 79.425h137.056c4.336 0 17.568 0 26.593 31.184l176.848 649.936c3.84 13.712 16.336 23.183 30.592 23.183h431.968c13.408 0 25.376-8.4 29.904-21.024l152.256-449.68c3.504-9.744 2.048-20.592-3.888-29.024zM639.537 140.93l152.032 129.584H487.457zm175.488 579.263H429.538L328.386 334.065h616.096zm-63.023 127.936c-44.192 0-80 35.808-80 80s35.808 80 80 80s80-35.808 80-80s-35.808-80-80-80m-288 0c-44.192 0-80 35.808-80 80s35.808 80 80 80s80-35.808 80-80s-35.808-80-80-80"/>
  693.                                             </svg>
  694.                                         </button>
  695.                                     </div>
  696.                                 </div>
  697.                             </div>
  698.                         </div>
  699.                     {% endfor %}
  700.                 {% endif %}
  701.             </div>
  703.             <!-- PAGINATION -->
  704.             {% if paginator is defined and paginator.pageCount > 1 %}
  705.                 <div class="row">
  706.                     <div class="col-12">
  707.                         <div class="pagination-wrapper">
  708.                             {{ knp_pagination_render(paginator, 'formation/custom_pagination.html.twig') }}
  709.                         </div>
  710.                     </div>
  711.                 </div>
  712.             {% endif %}
  713.         </div>
  714.     </div>
  716.     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  717.     <script>
  718.         // Fonction Toast personnalisée
  719.         function showToast(type, title, message, duration = 3000) {
  720.             const icons = {
  721.                 success: '<i class="fa fa-check-circle"></i>',
  722.                 info: '<i class="fa fa-info-circle"></i>',
  723.                 error: '<i class="fa fa-exclamation-circle"></i>',
  724.                 warning: '<i class="fa fa-exclamation-triangle"></i>'
  725.             };
  727.             const toast = document.createElement('div');
  728.             toast.className = `toast-notification toast-${type}`;
  729.             toast.innerHTML = `
  730.         <div class="toast-content">
  731.             <div class="toast-icon">
  732.                 ${icons[type]}
  733.             </div>
  734.             <div class="toast-text">
  735.                 <div class="toast-title">${title}</div>
  736.                 <div class="toast-message">${message}</div>
  737.             </div>
  738.             <button class="toast-close">
  739.                 <i class="fa fa-times"></i>
  740.             </button>
  741.         </div>
  742.         <div class="toast-progress">
  743.             <div class="toast-progress-bar" style="animation-duration: ${duration}ms;"></div>
  744.         </div>
  745.     `;
  747.             document.body.appendChild(toast);
  749.             // Fermeture avec bouton
  750.             const closeBtn = toast.querySelector('.toast-close');
  751.             closeBtn.addEventListener('click', () => {
  752.                 toast.remove();
  753.             });
  755.             // Auto-fermeture
  756.             setTimeout(() => {
  757.                 if (toast.parentNode) toast.remove();
  758.             }, duration);
  759.         }
  760.         document.addEventListener('DOMContentLoaded', () => {
  761.             const cartCount = document.getElementById('cart-count');
  763.             document.querySelectorAll('.btn-ajout-panier').forEach(button => {
  764.                 button.addEventListener('click', () => {
  765.                     const formationId = button.dataset.id;
  767.                     fetch(`/panier/ajouter/${formationId}`, {
  768.                         method: 'POST',
  769.                         headers: { 'X-Requested-With': 'XMLHttpRequest' }
  770.                     })
  771.                         .then(response => response.json())
  772.                         .then(data => {
  773.                             if (data.status === 'ok') {
  774.                                 if (cartCount) cartCount.textContent = data.total_items;
  776.                                 showToast('success', 'Ajouté au panier !', data.message, 2000);
  779.                                 button.disabled = true;
  780.                                 button.style.opacity = '0.6';
  781.                                 button.style.cursor = 'not-allowed';
  783.                             } else if (data.status === 'already_in_cart') {
  784.                                 showToast('info', 'Déjà dans le panier', data.message, 2500);
  785.                                 button.disabled = true;
  786.                                 button.style.opacity = '0.6';
  787.                                 button.style.cursor = 'not-allowed';
  789.                                 showToast('error', 'Erreur', data.message ?? 'Erreur lors de l\'ajout au panier.', 3000);
  790.                             }
  791.                         })
  792.                         .catch(() => {
  793.                             showToast('error', 'Erreur réseau', 'Impossible d\'ajouter la formation.', 3000);
  794.                         });
  795.                 });
  796.             });
  797.         });
  798.     </script>
  799. {% endblock %}