templates/pack/packFront.html.twig line 1

Open in your IDE?
  1. {% extends 'backfront.html.twig' %}
  3. {% block title %}Packs SIP Academy - Formations groupées et économiques{% endblock %}
  5. {% block meta_description %}
  6.     Découvrez nos packs de formation chez SIP Academy. Des offres groupées pour économiser sur vos formations et accélérer votre carrière.
  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 PACK - 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.         /* BADGE PACK (optionnel) */
  148.         .pack-badge {
  149.             position: absolute;
  150.             top: 15px;
  151.             right: 15px;
  152.             background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  153.             color: var(--navy);
  154.             padding: 6px 14px;
  155.             border-radius: 20px;
  156.             font-size: 11px;
  157.             font-weight: 800;
  158.             text-transform: uppercase;
  159.             letter-spacing: 1px;
  160.             z-index: 3;
  161.             box-shadow: 0 4px 12px rgba(255,174,39,0.3);
  162.         }
  164.         /* CORPS DE LA CARTE */
  165.         .single-item-text {
  166.             padding: 20px;
  167.             flex: 1;
  168.             display: flex;
  169.             flex-direction: column;
  170.         }
  171.         .single-item-text h4 {
  172.             font-size: 18px;
  173.             font-weight: 700;
  174.             margin-bottom: 12px;
  175.             line-height: 1.4;
  176.             min-height: 50px;
  177.         }
  178.         .single-item-text h4 a {
  179.             color: var(--text-dark);
  180.             text-decoration: none;
  181.             transition: color 0.2s;
  182.         }
  183.         .single-item-text h4 a:hover {
  184.             color: var(--gold);
  185.         }
  187.         /* DESCRIPTION */
  188.         .single-item-text > p {
  189.             font-size: 13px;
  190.             color: var(--text-muted);
  191.             line-height: 1.6;
  192.             margin-bottom: 16px;
  193.             display: -webkit-box;
  194.             -webkit-line-clamp: 2;
  195.             -webkit-box-orient: vertical;
  196.             overflow: hidden;
  197.         }
  199.         /* BADGE ÉCONOMIE */
  200.         .economy-badge {
  201.             display: inline-block;
  202.             background: rgba(255,174,39,0.15);
  203.             color: var(--gold-dark);
  204.             font-size: 11px;
  205.             font-weight: 700;
  206.             padding: 4px 10px;
  207.             border-radius: 20px;
  208.             margin-bottom: 15px;
  209.             width: fit-content;
  210.         }
  212.         /* INFOS CARTE (PRIX + PANIER) */
  213.         .single-item-content {
  214.             display: flex;
  215.             justify-content: space-between;
  216.             align-items: center;
  217.             margin-top: auto;
  218.             padding-top: 15px;
  219.             border-top: 1px solid var(--border-light);
  220.         }
  221.         .single-item-comment-view {
  222.             display: flex;
  223.             gap: 15px;
  224.             align-items: center;
  225.         }
  226.         .single-item-comment-view span {
  227.             font-size: 18px;
  228.             font-weight: 700;
  229.             color: var(--gold);
  230.             display: flex;
  231.             align-items: center;
  232.             gap: 5px;
  233.         }
  234.         .single-item-comment-view span svg {
  235.             width: 24px;
  236.             height: 24px;
  237.         }
  238.         .single-item-comment-view span svg path {
  239.             fill: var(--gold);
  240.         }
  242.         /* PRIX BARRÉ (ancien prix) */
  243.         .old-price {
  244.             font-size: 13px;
  245.             color: var(--text-muted);
  246.             text-decoration: line-through;
  247.             margin-left: 8px;
  248.             font-weight: normal;
  249.         }
  251.         /* BOUTON PANIER */
  252.         .btn-ajout-panier {
  253.             background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  254.             border: none;
  255.             color: white;
  256.             padding: 10px 15px;
  257.             border-radius: 12px;
  258.             transition: all 0.3s ease;
  259.             cursor: pointer;
  260.             display: flex;
  261.             align-items: center;
  262.             justify-content: center;
  263.         }
  264.         .btn-ajout-panier:hover {
  265.             background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  266.             transform: translateY(-2px);
  267.             box-shadow: 0 4px 12px rgba(255,174,39,0.3);
  268.         }
  269.         .btn-ajout-panier svg {
  270.             width: 22px;
  271.             height: 22px;
  272.         }
  273.         .btn-ajout-panier svg path {
  274.             fill: #fff;
  275.             transition: fill 0.3s ease;
  276.         }
  277.         .btn-ajout-panier:hover svg path {
  278.             fill: var(--navy);
  279.         }
  280.         .btn-ajout-panier:disabled {
  281.             opacity: 0.5;
  282.             cursor: not-allowed;
  283.             transform: none;
  284.         }
  286.         /* MESSAGE AUCUN PACK */
  287.         .no-packs-message {
  288.             text-align: center;
  289.             padding: 60px 40px;
  290.             background: #fff;
  291.             border-radius: 24px;
  292.             border: 1px solid var(--border-light);
  293.             box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  294.             max-width: 500px;
  295.             margin: 0 auto;
  296.         }
  297.         .no-packs-icon {
  298.             font-size: 64px;
  299.             color: var(--gold);
  300.             margin-bottom: 20px;
  301.         }
  302.         .no-packs-message h3 {
  303.             font-size: 24px;
  304.             font-weight: 700;
  305.             color: var(--text-dark);
  306.             margin-bottom: 12px;
  307.         }
  308.         .no-packs-message p {
  309.             font-size: 15px;
  310.             color: var(--text-muted);
  311.             margin-bottom: 25px;
  312.         }
  314.         /* PAGINATION */
  315.         .pagination-wrapper {
  316.             margin-top: 40px;
  317.             text-align: center;
  318.         }
  319.         .pagination {
  320.             display: flex;
  321.             justify-content: center;
  322.             gap: 8px;
  323.             list-style: none;
  324.             padding: 0;
  325.             margin: 0;
  326.         }
  327.         .pagination .page-item {
  328.             list-style: none;
  329.         }
  330.         .pagination .page-link {
  331.             display: flex;
  332.             align-items: center;
  333.             justify-content: center;
  334.             width: 40px;
  335.             height: 40px;
  336.             border-radius: 12px;
  337.             background: #fff;
  338.             border: 1px solid var(--border-light);
  339.             color: var(--navy);
  340.             font-weight: 500;
  341.             text-decoration: none;
  342.             transition: all 0.3s ease;
  343.         }
  344.         .pagination .page-link:hover {
  345.             background: var(--gold);
  346.             border-color: var(--gold);
  347.             color: var(--navy);
  348.         }
  349.         .pagination .active .page-link {
  350.             background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  351.             border-color: var(--navy);
  352.             color: #fff;
  353.         }
  355.         /* RESPONSIVE */
  356.         @media (max-width: 768px) {
  357.             .section-title h3 {
  358.                 font-size: 28px;
  359.             }
  360.             .single-item-image {
  361.                 height: 180px;
  362.             }
  363.             .single-item-text h4 {
  364.                 font-size: 16px;
  365.                 min-height: auto;
  366.             }
  367.             .pagination .page-link {
  368.                 width: 36px;
  369.                 height: 36px;
  370.                 font-size: 13px;
  371.             }
  372.             .breadcrumb-title h1 {
  373.                 font-size: 32px;
  374.             }
  375.             .single-item-comment-view span {
  376.                 font-size: 16px;
  377.             }
  378.             .single-item-comment-view span svg {
  379.                 width: 20px;
  380.                 height: 20px;
  381.             }
  382.             .btn-ajout-panier {
  383.                 padding: 8px 12px;
  384.             }
  385.             .btn-ajout-panier svg {
  386.                 width: 18px;
  387.                 height: 18px;
  388.             }
  389.         }
  390.     </style>
  392.     <!-- BREADCRUMB AREA -->
  393.     <div class="breadcrumb-area">
  394.         <div class="container">
  395.             <div class="row">
  396.                 <div class="col-md-12">
  397.                     <div class="breadcrumb-title">
  398.                         <h1>Nos Packs</h1>
  399.                         <ul class="breadcrumb-list">
  400.                             <li><a href="{{ path('app_home') }}">Accueil</a></li>
  401.                             <li><i class="zmdi zmdi-chevron-right"></i></li>
  402.                             <li class="active">Packs</li>
  403.                         </ul>
  404.                     </div>
  405.                 </div>
  406.             </div>
  407.         </div>
  408.     </div>
  410.     <!-- COURSE AREA -->
  411.     <div class="course-area">
  412.         <div class="container">
  413.             <div class="row">
  414.                 <div class="col-md-12">
  415.                     <div class="section-title-wrapper">
  416.                         <div class="section-title">
  417.                             <h3>Nos Packs</h3>
  418.                             <p>Des offres groupées économiques pour accélérer votre carrière</p>
  419.                         </div>
  420.                     </div>
  421.                 </div>
  422.             </div>
  424.             <div class="row">
  425.                 {% if packs is empty %}
  426.                     <div class="col-md-12">
  427.                         <div class="no-packs-message">
  428.                             <div class="no-packs-icon">
  429.                                 <i class="zmdi zmdi-info-outline"></i>
  430.                             </div>
  431.                             <h3>Aucun pack disponible</h3>
  432.                             <p>De nouveaux packs seront bientôt disponibles. Revenez prochainement !</p>
  433.                         </div>
  434.                     </div>
  435.                 {% else %}
  436.                     {% for pack in packs %}
  437.                         <div class="col-lg-4 col-md-6 col-12 mb-4 d-flex">
  438.                             <div class="single-item w-100">
  439.                                 <div class="single-item-image overlay-effect">
  440.                                     <a href="#">
  441.                                         <img src="{{ asset('uploads/formation/' ~ pack.image) }}" alt="{{ pack.libelle }}">
  442.                                     </a>
  444.                                 </div>
  445.                                 <div class="single-item-text">
  446.                                     <h4><a href="#">{{ pack.libelle }}</a></h4>
  447. {#                                    <div class="economy-badge">#}
  448. {#                                        <i class="zmdi zmdi-trending-down"></i> Économisez jusqu'à 30%#}
  449. {#                                    </div>#}
  450.                                     <p>
  451.                                         {% if pack.description|striptags|length > 100 %}
  452.                                             {{ pack.description|striptags|slice(0, 100) }}...
  453.                                         {% else %}
  454.                                             {{ pack.description|striptags }}
  455.                                         {% endif %}
  456.                                     </p>
  457.                                     <div class="single-item-content">
  458.                                         <div class="single-item-comment-view">
  459.                                             <span>
  460.                                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  461.                                                     <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"/>
  462.                                                 </svg>
  463.                                                 {{ pack.prix }} DT
  464.                                             </span>
  465.                                         </div>
  466.                                         <button class="btn-ajout-panier" data-id="{{ pack.id }}">
  467.                                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  468.                                                 <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"/>
  469.                                             </svg>
  470.                                         </button>
  471.                                     </div>
  472.                                 </div>
  473.                             </div>
  474.                         </div>
  475.                     {% endfor %}
  476.                 {% endif %}
  477.             </div>
  479.             <!-- PAGINATION -->
  480.             {% if paginator is defined and paginator.pageCount > 1 %}
  481.                 <div class="row">
  482.                     <div class="col-12">
  483.                         <div class="pagination-wrapper">
  484.                             {{ knp_pagination_render(paginator, 'formation/custom_pagination.html.twig') }}
  485.                         </div>
  486.                     </div>
  487.                 </div>
  488.             {% endif %}
  489.         </div>
  490.     </div>
  492.     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  493.     <script>
  494.         document.addEventListener('DOMContentLoaded', () => {
  495.             const cartCount = document.getElementById('cart-count');
  497.             document.querySelectorAll('.btn-ajout-panier').forEach(button => {
  498.                 button.addEventListener('click', () => {
  499.                     const packId = button.dataset.id;
  501.                     fetch(`/panier/ajouter/${packId}`, {
  502.                         method: 'POST',
  503.                         headers: { 'X-Requested-With': 'XMLHttpRequest' }
  504.                     })
  505.                         .then(response => response.json())
  506.                         .then(data => {
  507.                             if (data.status === 'ok') {
  508.                                 if (cartCount) cartCount.textContent = data.total_items;
  510.                                 Swal.fire({
  511.                                     icon: 'success',
  512.                                     title: 'Pack ajouté au panier !',
  513.                                     text: data.message,
  514.                                     timer: 1500,
  515.                                     showConfirmButton: false,
  516.                                     background: '#fff',
  517.                                     customClass: {
  518.                                         popup: 'swal-popup'
  519.                                     }
  520.                                 });
  522.                                 button.disabled = true;
  523.                                 button.style.opacity = '0.6';
  524.                                 button.style.cursor = 'not-allowed';
  526.                             } else if (data.status === 'already_in_cart') {
  527.                                 Swal.fire({
  528.                                     icon: 'info',
  529.                                     title: 'Déjà dans le panier',
  530.                                     text: data.message,
  531.                                     confirmButtonColor: '#FFAE27'
  532.                                 });
  533.                                 button.disabled = true;
  534.                                 button.style.opacity = '0.6';
  535.                                 button.style.cursor = 'not-allowed';
  537.                             } else {
  538.                                 Swal.fire({
  539.                                     icon: 'error',
  540.                                     title: 'Erreur',
  541.                                     text: data.message ?? 'Erreur lors de l\'ajout au panier.',
  542.                                     confirmButtonColor: '#FFAE27'
  543.                                 });
  544.                             }
  545.                         })
  546.                         .catch(() => {
  547.                             Swal.fire({
  548.                                 icon: 'error',
  549.                                 title: 'Erreur réseau',
  550.                                 text: 'Impossible d\'ajouter le pack.',
  551.                                 confirmButtonColor: '#FFAE27'
  552.                             });
  553.                         });
  554.                 });
  555.             });
  556.         });
  557.     </script>
  558. {% endblock %}