templates/panier/index.html.twig line 1

Open in your IDE?
  1. {% extends 'backfront.html.twig' %}
  3. {% block title %}SIP-ACADEMY - Mon Panier{% endblock %}
  5. {% block meta_description %}
  6.     Consultez votre panier d'achat SIP Academy. Gérez vos formations et packs, et finalisez votre commande en toute sécurité.
  7. {% endblock %}
  9. {% block body %}
  10.     <style>
  11.         /* ===== COULEURS ET VARIABLES ===== */
  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.             --success: #28a745;
  23.             --danger: #dc3545;
  24.         }
  26.         /* ===== BREADCRUMB ===== */
  27.         .breadcrumb-area {
  28.             background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  29.             padding: 80px 0 60px;
  30.             position: relative;
  31.         }
  32.         .breadcrumb-title h1 {
  33.             color: #fff;
  34.             font-size: 42px;
  35.             font-weight: 700;
  36.             margin-bottom: 10px;
  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.         }
  46.         .breadcrumb-list li, .breadcrumb-list li a {
  47.             color: rgba(255,255,255,0.7);
  48.             text-decoration: none;
  49.         }
  50.         .breadcrumb-list li.active {
  51.             color: var(--gold);
  52.         }
  54.         /* ===== PANIER ===== */
  55.         .cart-section {
  56.             padding: 60px 0;
  57.             background: #f8fafc;
  58.         }
  60.         /* Titre principal */
  61.         .cart-header {
  62.             margin-bottom: 30px;
  63.         }
  64.         .cart-title {
  65.             font-size: 28px;
  66.             font-weight: 700;
  67.             color: var(--text-dark);
  68.             margin-bottom: 8px;
  69.         }
  70.         .cart-subtitle {
  71.             color: var(--text-muted);
  72.             font-size: 14px;
  73.         }
  75.         /* Tableau */
  76.         .cart-table {
  77.             background: #fff;
  78.             border-radius: 20px;
  79.             overflow: hidden;
  80.             box-shadow: 0 5px 25px rgba(0,0,0,0.05);
  81.             border: 1px solid var(--border-light);
  82.         }
  83.         .cart-table thead th {
  84.             background: var(--navy-light);
  85.             padding: 15px 20px;
  86.             font-weight: 600;
  87.             color: var(--navy);
  88.             border-bottom: 2px solid var(--border-light);
  89.         }
  90.         .cart-table tbody td {
  91.             padding: 20px;
  92.             vertical-align: middle;
  93.             border-bottom: 1px solid var(--border-light);
  94.         }
  96.         /* Carte produit */
  97.         .product-card {
  98.             display: flex;
  99.             align-items: center;
  100.             gap: 15px;
  101.         }
  102.         .product-image {
  103.             width: 80px;
  104.             height: 80px;
  105.             border-radius: 12px;
  106.             overflow: hidden;
  107.             background: linear-gradient(135deg, #f8faff 0%, #fff 100%);
  108.             display: flex;
  109.             align-items: center;
  110.             justify-content: center;
  111.             flex-shrink: 0;
  112.         }
  113.         .product-image img {
  114.             width: auto;
  115.             height: auto;
  116.             max-width: 100%;
  117.             max-height: 100%;
  118.             object-fit: contain;
  119.         }
  120.         .product-info {
  121.             flex: 1;
  122.         }
  123.         .product-title {
  124.             font-size: 16px;
  125.             font-weight: 700;
  126.             color: var(--text-dark);
  127.             margin-bottom: 4px;
  128.         }
  129.         .product-title a {
  130.             color: inherit;
  131.             text-decoration: none;
  132.             transition: color 0.2s;
  133.         }
  134.         .product-title a:hover {
  135.             color: var(--gold);
  136.         }
  137.         .product-meta {
  138.             font-size: 12px;
  139.             color: var(--text-muted);
  140.         }
  142.         /* Badges */
  143.         .badge-custom {
  144.             display: inline-flex;
  145.             align-items: center;
  146.             gap: 6px;
  147.             padding: 6px 14px;
  148.             border-radius: 30px;
  149.             font-size: 12px;
  150.             font-weight: 600;
  151.         }
  152.         .badge-formation {
  153.             background: linear-gradient(135deg, #0d6efd, #0a58ca);
  154.             color: white;
  155.         }
  156.         .badge-pack {
  157.             background: linear-gradient(135deg, #28a745, #1e7e34);
  158.             color: white;
  159.         }
  161.         /* Prix */
  162.         .price-current {
  163.             font-size: 18px;
  164.             font-weight: 700;
  165.             color: var(--gold-dark);
  166.         }
  167.         .price-old {
  168.             font-size: 13px;
  169.             color: var(--text-muted);
  170.             text-decoration: line-through;
  171.             margin-left: 8px;
  172.         }
  174.         /* Bouton supprimer */
  175.         .btn-remove {
  176.             width: 36px;
  177.             height: 36px;
  178.             border-radius: 50%;
  179.             background: #f8f9fa;
  180.             border: 1px solid var(--border-light);
  181.             color: var(--danger);
  182.             display: flex;
  183.             align-items: center;
  184.             justify-content: center;
  185.             transition: all 0.3s ease;
  186.             cursor: pointer;
  187.         }
  188.         .btn-remove:hover {
  189.             background: var(--danger);
  190.             color: white;
  191.             transform: scale(1.05);
  192.         }
  194.         /* Panier vide */
  196.         /* Panier vide - centré parfaitement */
  197.         .empty-cart {
  198.             text-align: center;
  199.             padding: 60px 40px;
  200.             background: #fff;
  201.             border-radius: 24px;
  202.             border: 1px solid var(--border-light);
  203.             box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  204.             max-width: 550px;
  205.             margin: 0 auto;  /* Centrage horizontal */
  206.             width: 100%;
  207.         }
  209.         .empty-cart-icon {
  210.             font-size: 80px;
  211.             color: var(--gold);
  212.             margin-bottom: 20px;
  213.         }
  215.         .empty-cart h3 {
  216.             font-size: 24px;
  217.             font-weight: 700;
  218.             color: var(--text-dark);
  219.             margin-bottom: 12px;
  220.         }
  222.         .empty-cart p {
  223.             color: var(--text-muted);
  224.             margin-bottom: 30px;
  225.             font-size: 15px;
  226.         }
  228.         .btn-continue {
  229.             display: inline-flex;
  230.             align-items: center;
  231.             justify-content: center;
  232.             gap: 10px;
  233.             background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  234.             color: #fff;
  235.             padding: 12px 32px;
  236.             border-radius: 40px;
  237.             text-decoration: none;
  238.             font-weight: 600;
  239.             transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  240.         }
  242.         .btn-continue:hover {
  243.             background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  244.             color: var(--navy);
  245.             transform: translateY(-3px);
  246.             box-shadow: 0 10px 25px rgba(255,174,39,0.3);
  247.         }
  249.         .btn-continue i {
  250.             transition: transform 0.3s;
  251.         }
  253.         .btn-continue:hover i {
  254.             transform: translateX(-5px);
  255.         }
  257.         /* Résumé commande */
  258.         .summary-card {
  259.             background: #fff;
  260.             border-radius: 20px;
  261.             padding: 25px;
  262.             box-shadow: 0 5px 25px rgba(0,0,0,0.05);
  263.             border: 1px solid var(--border-light);
  264.             position: sticky;
  265.             top: 20px;
  266.         }
  267.         .summary-title {
  268.             font-size: 20px;
  269.             font-weight: 700;
  270.             color: var(--text-dark);
  271.             margin-bottom: 20px;
  272.             padding-bottom: 15px;
  273.             border-bottom: 2px solid var(--border-light);
  274.         }
  275.         .summary-row {
  276.             display: flex;
  277.             justify-content: space-between;
  278.             padding: 10px 0;
  279.             font-size: 14px;
  280.         }
  281.         .summary-row.total {
  282.             border-top: 2px solid var(--border-light);
  283.             margin-top: 10px;
  284.             padding-top: 15px;
  285.             font-size: 18px;
  286.             font-weight: 700;
  287.             color: var(--text-dark);
  288.         }
  289.         .summary-row.total .summary-value {
  290.             color: var(--gold-dark);
  291.             font-size: 22px;
  292.         }
  293.         .summary-divider {
  294.             height: 1px;
  295.             background: var(--border-light);
  296.             margin: 15px 0;
  297.         }
  298.         .btn-checkout {
  299.             width: 100%;
  300.             background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  301.             color: #fff;
  302.             border: none;
  303.             padding: 14px;
  304.             border-radius: 40px;
  305.             font-weight: 700;
  306.             font-size: 16px;
  307.             transition: all 0.3s ease;
  308.             margin-top: 20px;
  309.             cursor: pointer;
  310.         }
  311.         .btn-checkout:hover {
  312.             background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  313.             color: var(--navy);
  314.             transform: translateY(-2px);
  315.             box-shadow: 0 8px 20px rgba(255,174,39,0.3);
  316.         }
  317.         .payment-icons {
  318.             display: flex;
  319.             justify-content: center;
  320.             gap: 15px;
  321.             margin-top: 20px;
  322.             padding-top: 15px;
  323.             border-top: 1px solid var(--border-light);
  324.         }
  325.         .payment-icons i {
  326.             font-size: 24px;
  327.             color: #adb5bd;
  328.             transition: color 0.3s;
  329.         }
  330.         .payment-icons i:hover {
  331.             color: var(--gold);
  332.         }
  334.         /* Responsive */
  335.         @media (max-width: 768px) {
  336.             .cart-table thead {
  337.                 display: none;
  338.             }
  339.             .cart-table tbody tr {
  340.                 display: block;
  341.                 margin-bottom: 15px;
  342.                 border: 1px solid var(--border-light);
  343.                 border-radius: 16px;
  344.             }
  345.             .cart-table tbody td {
  346.                 display: flex;
  347.                 justify-content: space-between;
  348.                 align-items: center;
  349.                 padding: 12px 15px;
  350.                 border-bottom: 1px solid var(--border-light);
  351.             }
  352.             .cart-table tbody td:last-child {
  353.                 border-bottom: none;
  354.             }
  355.             .cart-table tbody td::before {
  356.                 content: attr(data-label);
  357.                 font-weight: 600;
  358.                 color: var(--navy);
  359.             }
  360.             .product-card {
  361.                 flex-direction: column;
  362.                 text-align: center;
  363.             }
  364.             .summary-card {
  365.                 margin-top: 20px;
  366.                 position: static;
  367.             }
  368.         }
  369.     </style>
  371.     <!-- BREADCRUMB -->
  372.     <div class="breadcrumb-area">
  373.         <div class="container">
  374.             <div class="row">
  375.                 <div class="col-md-12">
  376.                     <div class="breadcrumb-title text-center">
  377.                         <h1>Mon Panier</h1>
  378.                         <ul class="breadcrumb-list">
  379.                             <li><a href="{{ path('app_home') }}">Accueil</a></li>
  380.                             <li class="active">Panier</li>
  381.                         </ul>
  382.                     </div>
  383.                 </div>
  384.             </div>
  385.         </div>
  386.     </div>
  388.     <!-- SECTION PANIER -->
  389.     <!-- SECTION PANIER -->
  390.     <div class="cart-section">
  391.         <div class="container">
  392.             {% if items|length > 0 %}
  393.                 <!-- Affichage quand le panier n'est pas vide -->
  394.                 <div class="row">
  395.                     <div class="col-lg-8">
  396.                         <div class="cart-header">
  397.                             <h2 class="cart-title">Mon Panier</h2>
  398.                             <p class="cart-subtitle">{{ items|length }} élément(s) dans votre panier</p>
  399.                         </div>
  400.                         <div class="cart-table">
  401.                             <table class="table mb-0">
  402.                                 <thead>
  403.                                 <tr>
  404.                                     <th>Produit</th>
  405.                                     <th>Type</th>
  406.                                     <th class="text-end">Prix</th>
  407.                                     <th class="text-center">Action</th>
  408.                                 </tr>
  409.                                 </thead>
  410.                                 <tbody>
  411.                                 {% set totalPanier = 0 %}
  412.                                 {% for item in items %}
  413.                                     {% set quantite = 1 %}
  414.                                     {% set prix = item.prix %}
  415.                                     {% set sousTotal = prix * quantite %}
  416.                                     {% set totalPanier = totalPanier + sousTotal %}
  418.                                     <tr>
  419.                                         <td data-label="Produit">
  420.                                             <div class="product-card">
  421.                                                 <div class="product-image">
  422.                                                     {% if item.type == 'formation' %}
  423.                                                         <img src="{{ asset('uploads/formation/' ~ item.item.affiche) }}" alt="{{ item.item.titre }}">
  424.                                                     {% else %}
  425.                                                         <img src="{{ asset('uploads/formation/' ~ item.item.image) }}" alt="{{ item.item.libelle }}">
  426.                                                     {% endif %}
  427.                                                 </div>
  428.                                                 <div class="product-info">
  429.                                                     <h5 class="product-title">
  430.                                                         <a href="{% if item.type == 'formation' %}{{ path('app_formation_detailsfront', {'slug': item.item.slug}) }}{% else %}#{% endif %}">
  431.                                                             {% if item.type == 'formation' %}
  432.                                                                 {{ item.item.titre }}
  433.                                                             {% else %}
  434.                                                                 {{ item.item.libelle }}
  435.                                                             {% endif %}
  436.                                                         </a>
  437.                                                     </h5>
  438.                                                     <div class="product-meta">
  439.                                                         {% if item.type == 'formation' and item.item.formateur %}
  440.                                                             Par {{ item.item.formateur.prenom }} {{ item.item.formateur.nom }}
  441.                                                         {% elseif item.type == 'pack' %}
  442.                                                             Pack de formations
  443.                                                         {% endif %}
  444.                                                     </div>
  445.                                                 </div>
  446.                                             </div>
  447.                                         </td>
  448.                                         <td data-label="Type">
  449.                                             {% if item.type == 'formation' %}
  450.                                                 <span class="badge-custom badge-formation">
  451.                                                 <i class="fa fa-graduation-cap"></i> Formation
  452.                                             </span>
  453.                                             {% else %}
  454.                                                 <span class="badge-custom badge-pack">
  455.                                                 <i class="fa fa-cubes"></i> Pack
  456.                                             </span>
  457.                                             {% endif %}
  458.                                         </td>
  459.                                         <td data-label="Prix" class="text-end">
  460.                                             <span class="price-current">{{ sousTotal }} DT</span>
  461.                                             {% if item.type == 'formation' and item.item.isPromo %}
  462.                                                 <div class="price-old"><del>{{ item.item.prixPromo }} DT</del></div>
  463.                                             {% endif %}
  464.                                         </td>
  465.                                         <td data-label="Action" class="text-center">
  466.                                             <button class="btn-remove"
  467.                                                     data-id="{{ item.item.id }}"
  468.                                                     data-type="{{ item.type }}">
  469.                                                 <i class="fa fa-trash-o"></i>
  470.                                             </button>
  471.                                         </td>
  472.                                     </tr>
  473.                                 {% endfor %}
  474.                                 </tbody>
  475.                             </table>
  476.                         </div>
  477.                     </div>
  479.                     <div class="col-lg-4">
  480.                         <div class="summary-card">
  481.                             <h4 class="summary-title">Résumé de la commande</h4>
  483.                             <div class="summary-row">
  484.                                 <span class="summary-label">Sous-total</span>
  485.                                 <span class="summary-value">{{ totalPanier|number_format(2, '.', ',') }} DT</span>
  486.                             </div>
  488.                             {% set tva = totalPanier * 0.19 %}
  489.                             <div class="summary-row">
  490.                                 <span class="summary-label">TVA (19%)</span>
  491.                                 <span class="summary-value">{{ tva|number_format(2, '.', ',') }} DT</span>
  492.                             </div>
  494.                             <div class="summary-row">
  495.                                 <span class="summary-label">Timbre fiscal</span>
  496.                                 <span class="summary-value">1.00 DT</span>
  497.                             </div>
  501.                             {% set totalAvecTvaEtTimbre = totalPanier + tva + 1 %}
  502.                             <div class="summary-row total">
  503.                                 <span class="summary-label">Total à payer</span>
  504.                                 <span class="summary-value">{{ totalAvecTvaEtTimbre|number_format(2, '.', ',') }} DT</span>
  505.                             </div>
  507.                             <button id="btn-payer" class="btn-checkout">
  508.                                 <i class="fa fa-lock"></i>
  509.                                 Valider la commande
  510.                             </button>
  513.                         </div>
  514.                     </div>
  515.                 </div>
  516.             {% else %}
  517.                 <!-- Panier vide - centré -->
  518.                 <div class="row">
  519.                     <div class="col-12">
  520.                         <div class="empty-cart">
  521.                             <div class="empty-cart-icon">
  522.                                 <i class="fa fa-shopping-cart"></i>
  523.                             </div>
  524.                             <h3>Votre panier est vide</h3>
  525.                             <p>Découvrez nos formations et packs pour commencer votre apprentissage</p>
  526.                             <a href="{{ path('app_formation_elearning_front') }}" class="btn-continue">
  527.                                 <i class="fa fa-arrow-left"></i>
  528.                                 Découvrir nos formations
  529.                             </a>
  530.                         </div>
  531.                     </div>
  532.                 </div>
  533.             {% endif %}
  534.         </div>
  535.     </div>
  537.     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  538.     <script>
  539.         document.addEventListener('DOMContentLoaded', () => {
  540.             // Gestion de la suppression
  541.             document.querySelectorAll('.btn-remove').forEach(btn => {
  542.                 btn.addEventListener('click', async (e) => {
  543.                     e.preventDefault();
  544.                     const id = btn.dataset.id;
  545.                     const type = btn.dataset.type;
  547.                     const result = await Swal.fire({
  548.                         title: 'Confirmation',
  549.                         text: 'Voulez-vous vraiment supprimer cet élément du panier ?',
  550.                         icon: 'warning',
  551.                         showCancelButton: true,
  552.                         confirmButtonColor: '#dc3545',
  553.                         cancelButtonColor: '#6c757d',
  554.                         confirmButtonText: 'Oui, supprimer',
  555.                         cancelButtonText: 'Annuler'
  556.                     });
  558.                     if (result.isConfirmed) {
  559.                         try {
  560.                             const response = await fetch(`/panier/supprimer/${id}?type=${type}`, {
  561.                                 method: 'POST',
  562.                                 headers: { 'X-Requested-With': 'XMLHttpRequest' }
  563.                             });
  564.                             if (response.ok) {
  565.                                 Swal.fire({
  566.                                     icon: 'success',
  567.                                     title: 'Supprimé !',
  568.                                     text: 'L\'élément a été supprimé de votre panier.',
  569.                                     timer: 1500,
  570.                                     showConfirmButton: false
  571.                                 }).then(() => location.reload());
  572.                             }
  573.                         } catch (err) {
  574.                             console.error(err);
  575.                         }
  576.                     }
  577.                 });
  578.             });
  580.             // Gestion du paiement
  581.             const btnPayer = document.getElementById('btn-payer');
  582.             const isAuthenticated = {{ isAuthenticated ? 'true' : 'false' }};
  584.             if (btnPayer) {
  585.                 btnPayer.addEventListener('click', (event) => {
  586.                     event.preventDefault();
  588.                     if (!isAuthenticated) {
  589.                         Swal.fire({
  590.                             icon: 'info',
  591.                             title: 'Connexion requise',
  592.                             text: 'Vous devez être connecté pour finaliser votre commande.',
  593.                             showCancelButton: true,
  594.                             confirmButtonText: 'Se connecter',
  595.                             cancelButtonText: 'Annuler',
  596.                             confirmButtonColor: '#1F3971'
  597.                         }).then((result) => {
  598.                             if (result.isConfirmed) {
  599.                                 // Rediriger vers login avec l'URL de retour vers le panier
  600.                                 window.location.href = '{{ path('app_login') }}?redirect={{ path('panier_voir')|url_encode }}';
  601.                             }
  602.                         });
  603.                     }
  604.                     else {
  605.                         Swal.fire({
  606.                             icon: 'question',
  607.                             title: 'Confirmation',
  608.                             html: 'Voulez-vous confirmer cette commande ?<br><small>Le paiement s\'effectuera à la livraison</small>',
  609.                             showCancelButton: true,
  610.                             confirmButtonText: 'Oui, confirmer',
  611.                             cancelButtonText: 'Annuler',
  612.                             confirmButtonColor: '#28a745'
  613.                         }).then((result) => {
  614.                             if (result.isConfirmed) {
  615.                                 window.location.href = '{{ path('panier_confirmer') }}';
  616.                             }
  617.                         });
  618.                     }
  619.                 });
  620.             }
  621.         });
  622.     </script>
  623. {% endblock %}