templates/Accueil/CommandeGroupee.html.twig line 1

Open in your IDE?
  1. {% extends "Accueil/layoutAccueil.html.twig" %}
  3. {% block title %}Commande Groupée — 5sur5 Séjour{% endblock %}
  5. {% block stylesheets %}
  6. {{ parent() }}
  7. <style>
  8.     :root {
  9.         --bg-page: #F9FBFC;
  10.         --text-primary: #1a2b3c;
  11.         --text-secondary: #6B7280;
  12.         --border-light: #e2e8f0;
  13.     }
  15.     .group-order-page {
  16.         background: var(--bg-page);
  17.         min-height: calc(100vh - 80px);
  18.         padding: 60px 24px 80px;
  19.     }
  20.     
  21.     .group-order-container {
  22.         max-width: 800px;
  23.         margin: 0 auto;
  24.     }
  25.     
  26.     .group-order-header {
  27.         text-align: center;
  28.         margin-bottom: 40px;
  29.     }
  30.     
  31.     .group-order-icon {
  32.         width: 80px;
  33.         height: 80px;
  34.         border-radius: 20px;
  35.         background: linear-gradient(135deg, rgba(245, 96, 64, 0.1) 0%, rgba(65, 162, 170, 0.1) 100%);
  36.         display: inline-flex;
  37.         align-items: center;
  38.         justify-content: center;
  39.         margin-bottom: 20px;
  40.     }
  41.     
  42.     .group-order-icon i {
  43.         font-size: 36px;
  44.         background: linear-gradient(135deg, #F56040 0%, #41A2AA 100%);
  45.         -webkit-background-clip: text;
  46.         -webkit-text-fill-color: transparent;
  47.         background-clip: text;
  48.     }
  49.     
  50.     .group-order-title {
  51.         font-size: 32px;
  52.         font-weight: 700;
  53.         color: var(--text-primary);
  54.         margin-bottom: 12px;
  55.     }
  56.     
  57.     .group-order-subtitle {
  58.         font-size: 16px;
  59.         color: var(--text-secondary);
  60.         max-width: 500px;
  61.         margin: 0 auto;
  62.     }
  63.     
  64.     .group-order-badges {
  65.         display: flex;
  66.         justify-content: center;
  67.         gap: 16px;
  68.         margin-top: 20px;
  69.         flex-wrap: wrap;
  70.     }
  71.     
  72.     .group-order-badge {
  73.         display: inline-flex;
  74.         align-items: center;
  75.         gap: 8px;
  76.         padding: 8px 16px;
  77.         background: white;
  78.         border: 1px solid var(--border-light);
  79.         border-radius: 30px;
  80.         font-size: 13px;
  81.         color: var(--text-secondary);
  82.     }
  83.     
  84.     .group-order-badge i {
  85.         color: #F56040;
  86.     }
  87.     
  88.     .group-order-card {
  89.         background: white;
  90.         border-radius: 20px;
  91.         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  92.         overflow: hidden;
  93.     }
  94.     
  95.     .group-order-progress {
  96.         padding: 24px 32px;
  97.         background: linear-gradient(135deg, rgba(65, 162, 170, 0.04) 0%, rgba(245, 96, 64, 0.04) 100%);
  98.         border-bottom: 1px solid var(--border-light);
  99.     }
  100.     
  101.     .progress-tracker {
  102.         display: flex;
  103.         align-items: center;
  104.         justify-content: center;
  105.         gap: 8px;
  106.     }
  107.     
  108.     .step-dot {
  109.         width: 36px;
  110.         height: 36px;
  111.         border-radius: 50%;
  112.         background: white;
  113.         border: 2px solid #e5e5e5;
  114.         display: flex;
  115.         align-items: center;
  116.         justify-content: center;
  117.         font-size: 14px;
  118.         font-weight: 600;
  119.         color: #9b9b9b;
  120.         transition: all 0.3s ease;
  121.     }
  122.     
  123.     .step-dot.active {
  124.         background: #41A2AA;
  125.         border-color: #41A2AA;
  126.         color: white;
  127.     }
  128.     
  129.     .step-dot.completed {
  130.         background: #10B981;
  131.         border-color: #10B981;
  132.         color: white;
  133.     }
  134.     
  135.     .step-line {
  136.         width: 60px;
  137.         height: 2px;
  138.         background: #e5e5e5;
  139.         transition: background 0.3s ease;
  140.     }
  141.     
  142.     .step-line.completed {
  143.         background: #10B981;
  144.     }
  145.     
  146.     .step-labels {
  147.         display: flex;
  148.         justify-content: center;
  149.         gap: 40px;
  150.         margin-top: 12px;
  151.     }
  152.     
  153.     .step-label {
  154.         font-size: 12px;
  155.         font-weight: 500;
  156.         color: #9b9b9b;
  157.         transition: color 0.3s ease;
  158.     }
  159.     
  160.     .step-label.active {
  161.         color: #41A2AA;
  162.     }
  163.     
  164.     .group-order-body {
  165.         padding: 32px;
  166.     }
  167.     
  168.     .form-step {
  169.         display: none;
  170.     }
  171.     
  172.     .form-step.active {
  173.         display: block;
  174.         animation: fadeIn 0.3s ease;
  175.     }
  176.     
  177.     @keyframes fadeIn {
  178.         from { opacity: 0; transform: translateY(10px); }
  179.         to { opacity: 1; transform: translateY(0); }
  180.     }
  181.     
  182.     .section-title {
  183.         font-size: 18px;
  184.         font-weight: 600;
  185.         color: var(--text-primary);
  186.         margin-bottom: 24px;
  187.         text-align: center;
  188.     }
  189.     
  190.     /* Product Cards */
  191.     .products-grid {
  192.         display: grid;
  193.         grid-template-columns: repeat(3, 1fr);
  194.         gap: 16px;
  195.     }
  196.     
  197.     .product-card {
  198.         border: 2px solid #e5e7eb;
  199.         border-radius: 14px;
  200.         padding: 0;
  201.         cursor: pointer;
  202.         transition: all 0.3s ease;
  203.         overflow: hidden;
  204.         background: white;
  205.     }
  206.     
  207.     .product-card:hover {
  208.         border-color: #41A2AA;
  209.         transform: translateY(-4px);
  210.         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  211.     }
  212.     
  213.     .product-card.selected {
  214.         border-color: #1a1a1a;
  215.         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  216.     }
  217.     
  218.     .product-image {
  219.         height: 120px;
  220.         background: linear-gradient(135deg, rgba(65, 162, 170, 0.08) 0%, rgba(245, 96, 64, 0.08) 100%);
  221.         display: flex;
  222.         align-items: center;
  223.         justify-content: center;
  224.         padding: 16px;
  225.     }
  226.     
  227.     .product-image img {
  228.         max-height: 100%;
  229.         max-width: 100%;
  230.         object-fit: contain;
  231.     }
  232.     
  233.     .product-info {
  234.         padding: 16px;
  235.         text-align: center;
  236.     }
  237.     
  238.     .product-title {
  239.         font-size: 14px;
  240.         font-weight: 600;
  241.         color: var(--text-primary);
  242.         margin-bottom: 4px;
  243.     }
  244.     
  245.     .product-desc {
  246.         font-size: 12px;
  247.         color: var(--text-secondary);
  248.         margin-bottom: 8px;
  249.     }
  250.     
  251.     .product-requirement {
  252.         font-size: 11px;
  253.         color: #F56040;
  254.     }
  255.     
  256.     /* Form inputs */
  257.     .form-row {
  258.         display: grid;
  259.         grid-template-columns: 1fr 1fr;
  260.         gap: 16px;
  261.         margin-bottom: 16px;
  262.     }
  263.     
  264.     .form-row.full {
  265.         grid-template-columns: 1fr;
  266.     }
  267.     
  268.     .form-group {
  269.         display: flex;
  270.         flex-direction: column;
  271.         gap: 6px;
  272.     }
  273.     
  274.     .form-label {
  275.         font-size: 13px;
  276.         font-weight: 500;
  277.         color: var(--text-secondary);
  278.     }
  279.     
  280.     .form-input {
  281.         padding: 12px 16px;
  282.         border: 1px solid #e5e7eb;
  283.         border-radius: 10px;
  284.         font-size: 14px;
  285.         color: var(--text-primary);
  286.         transition: all 0.2s ease;
  287.     }
  288.     
  289.     .form-input:focus {
  290.         outline: none;
  291.         border-color: #41A2AA;
  292.         box-shadow: 0 0 0 3px rgba(65, 162, 170, 0.1);
  293.     }
  294.     
  295.     .form-input.is-invalid {
  296.         border-color: #F56040;
  297.     }
  298.     
  299.     /* Radio options */
  300.     .radio-group {
  301.         display: flex;
  302.         gap: 12px;
  303.     }
  304.     
  305.     .radio-option {
  306.         flex: 1;
  307.         position: relative;
  308.     }
  309.     
  310.     .radio-option input {
  311.         position: absolute;
  312.         opacity: 0;
  313.     }
  314.     
  315.     .radio-option label {
  316.         display: block;
  317.         padding: 14px 20px;
  318.         border: 1px solid #e5e7eb;
  319.         border-radius: 10px;
  320.         text-align: center;
  321.         font-size: 14px;
  322.         font-weight: 500;
  323.         color: var(--text-primary);
  324.         cursor: pointer;
  325.         transition: all 0.2s ease;
  326.     }
  327.     
  328.     .radio-option input:checked + label {
  329.         background: rgba(65, 162, 170, 0.08);
  330.         border-color: #41A2AA;
  331.         color: #41A2AA;
  332.     }
  333.     
  334.     /* Discount display */
  335.     .discount-box {
  336.         background: linear-gradient(135deg, rgba(245, 96, 64, 0.08) 0%, rgba(245, 96, 64, 0.04) 100%);
  337.         border-radius: 12px;
  338.         padding: 20px;
  339.         text-align: center;
  340.         margin-top: 20px;
  341.     }
  342.     
  343.     .discount-value {
  344.         font-size: 36px;
  345.         font-weight: 700;
  346.         color: #F56040;
  347.     }
  348.     
  349.     .discount-label {
  350.         font-size: 14px;
  351.         color: var(--text-secondary);
  352.     }
  353.     
  354.     /* Footer */
  355.     .group-order-footer {
  356.         padding: 20px 32px;
  357.         border-top: 1px solid var(--border-light);
  358.         display: flex;
  359.         justify-content: space-between;
  360.         align-items: center;
  361.         background: #fafbfc;
  362.     }
  363.     
  364.     .footer-info {
  365.         display: flex;
  366.         align-items: center;
  367.         gap: 8px;
  368.         font-size: 13px;
  369.         color: var(--text-secondary);
  370.     }
  371.     
  372.     .footer-info i {
  373.         color: #10B981;
  374.     }
  375.     
  376.     .footer-actions {
  377.         display: flex;
  378.         gap: 12px;
  379.     }
  380.     
  381.     .btn-back {
  382.         padding: 12px 24px;
  383.         border: 1px solid #e5e7eb;
  384.         border-radius: 10px;
  385.         background: white;
  386.         color: var(--text-secondary);
  387.         font-size: 14px;
  388.         font-weight: 500;
  389.         cursor: pointer;
  390.         transition: all 0.2s ease;
  391.     }
  392.     
  393.     .btn-back:hover {
  394.         background: #f5f5f5;
  395.     }
  396.     
  397.     .btn-next {
  398.         padding: 12px 32px;
  399.         border: none;
  400.         border-radius: 10px;
  401.         background: linear-gradient(135deg, #F56040 0%, #ff7659 100%);
  402.         color: white;
  403.         font-size: 14px;
  404.         font-weight: 600;
  405.         cursor: pointer;
  406.         transition: all 0.2s ease;
  407.         box-shadow: 0 4px 12px rgba(245, 96, 64, 0.25);
  408.     }
  409.     
  410.     .btn-next:hover {
  411.         transform: translateY(-2px);
  412.         box-shadow: 0 6px 16px rgba(245, 96, 64, 0.35);
  413.     }
  414.     
  415.     .btn-submit {
  416.         padding: 12px 32px;
  417.         border: none;
  418.         border-radius: 10px;
  419.         background: linear-gradient(135deg, #41A2AA 0%, #359BA3 100%);
  420.         color: white;
  421.         font-size: 14px;
  422.         font-weight: 600;
  423.         cursor: pointer;
  424.         transition: all 0.2s ease;
  425.         box-shadow: 0 4px 12px rgba(65, 162, 170, 0.25);
  426.     }
  427.     
  428.     .btn-submit:hover {
  429.         transform: translateY(-2px);
  430.         box-shadow: 0 6px 16px rgba(65, 162, 170, 0.35);
  431.     }
  432.     
  433.     /* Info section */
  434.     .info-section {
  435.         background: linear-gradient(135deg, rgba(65, 162, 170, 0.05) 0%, rgba(245, 96, 64, 0.05) 100%);
  436.         border-radius: 16px;
  437.         padding: 32px;
  438.         margin-top: 40px;
  439.         text-align: center;
  440.     }
  441.     
  442.     .info-section h3 {
  443.         font-size: 20px;
  444.         font-weight: 600;
  445.         color: var(--text-primary);
  446.         margin-bottom: 16px;
  447.     }
  448.     
  449.     .info-section p {
  450.         font-size: 15px;
  451.         color: var(--text-secondary);
  452.         line-height: 1.6;
  453.         margin-bottom: 24px;
  454.     }
  455.     
  456.     .info-benefits {
  457.         display: grid;
  458.         grid-template-columns: repeat(3, 1fr);
  459.         gap: 20px;
  460.         margin-top: 24px;
  461.     }
  462.     
  463.     .info-benefit {
  464.         text-align: center;
  465.     }
  466.     
  467.     .info-benefit-icon {
  468.         width: 48px;
  469.         height: 48px;
  470.         border-radius: 12px;
  471.         background: white;
  472.         display: inline-flex;
  473.         align-items: center;
  474.         justify-content: center;
  475.         margin-bottom: 12px;
  476.         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  477.     }
  478.     
  479.     .info-benefit-icon i {
  480.         font-size: 22px;
  481.         color: #41A2AA;
  482.     }
  483.     
  484.     .info-benefit h4 {
  485.         font-size: 14px;
  486.         font-weight: 600;
  487.         color: var(--text-primary);
  488.         margin-bottom: 4px;
  489.     }
  490.     
  491.     .info-benefit p {
  492.         font-size: 13px;
  493.         color: var(--text-secondary);
  494.         margin: 0;
  495.     }
  496.     
  497.     /* Responsive */
  498.     @media (max-width: 768px) {
  499.         .group-order-page {
  500.             padding: 40px 16px 60px;
  501.         }
  502.         
  503.         .group-order-title {
  504.             font-size: 26px;
  505.         }
  506.         
  507.         .products-grid {
  508.             grid-template-columns: 1fr;
  509.         }
  510.         
  511.         .form-row {
  512.             grid-template-columns: 1fr;
  513.         }
  514.         
  515.         .radio-group {
  516.             flex-direction: column;
  517.         }
  518.         
  519.         .group-order-footer {
  520.             flex-direction: column;
  521.             gap: 16px;
  522.         }
  523.         
  524.         .footer-actions {
  525.             width: 100%;
  526.         }
  527.         
  528.         .footer-actions button {
  529.             flex: 1;
  530.         }
  531.         
  532.         .step-labels {
  533.             gap: 20px;
  534.         }
  535.         
  536.         .step-line {
  537.             width: 30px;
  538.         }
  539.         
  540.         .info-benefits {
  541.             grid-template-columns: 1fr;
  542.         }
  543.     }
  544. </style>
  545. {% endblock %}
  547. {% block Content %}
  548. <div class="group-order-page">
  549.     <div class="group-order-container">
  550.         
  551.         {# Header #}
  552.         <div class="group-order-header">
  553.             <div class="group-order-icon">
  554.                 <i class="bi bi-people-fill"></i>
  555.             </div>
  556.             <h1 class="group-order-title">Commande Groupée</h1>
  557.             <p class="group-order-subtitle">Proposez aux familles de commander ensemble et bénéficiez de réductions exclusives !</p>
  558.             <div class="group-order-badges">
  559.                 <span class="group-order-badge"><i class="bi bi-percent"></i> Jusqu'à -20%</span>
  560.                 <span class="group-order-badge"><i class="bi bi-truck"></i> Livraison gratuite</span>
  561.                 <span class="group-order-badge"><i class="bi bi-shield-check"></i> Paiement sécurisé</span>
  562.             </div>
  563.         </div>
  564.         
  565.         {# Form Card #}
  566.         <div class="group-order-card">
  567.             
  568.             {# Progress #}
  569.             <div class="group-order-progress">
  570.                 <div class="progress-tracker">
  571.                     <div class="step-dot active" data-step="1">1</div>
  572.                     <div class="step-line" id="line1"></div>
  573.                     <div class="step-dot" data-step="2">2</div>
  574.                     <div class="step-line" id="line2"></div>
  575.                     <div class="step-dot" data-step="3">3</div>
  576.                 </div>
  577.                 <div class="step-labels">
  578.                     <span class="step-label active" data-step="1">Produit</span>
  579.                     <span class="step-label" data-step="2">Informations</span>
  580.                     <span class="step-label" data-step="3">Validation</span>
  581.                 </div>
  582.             </div>
  583.             
  584.             {# Form Body #}
  585.             <form id="groupOrderForm" method="POST" action="{{ path('app_contact') }}">
  586.                 <input type="hidden" name="subject" value="Demande de commande groupée">
  587.                 
  588.                 <div class="group-order-body">
  589.                     
  590.                     {# Step 1: Product #}
  591.                     <div class="form-step active" id="step1">
  592.                         <h3 class="section-title">Quel produit vous intéresse ?</h3>
  593.                         <div class="products-grid">
  594.                             <div class="product-card selected" onclick="selectProduct('livre', this)">
  595.                                 <input type="hidden" name="product_type" value="Livre Séjour">
  596.                                 <div class="product-image">
  597.                                     <img src="https://res.cloudinary.com/apss-factory/image/upload/v1585907734/newprod/LivreSouvenir5sur5-4_vyykcv.jpg" alt="Livre Séjour">
  598.                                 </div>
  599.                                 <div class="product-info">
  600.                                     <h4 class="product-title">Livre Séjour</h4>
  601.                                     <p class="product-desc">Format A4 • Couverture rigide</p>
  602.                                     <span class="product-requirement">📷 Min. 32 photos</span>
  603.                                 </div>
  604.                             </div>
  605.                             <div class="product-card" onclick="selectProduct('album', this)">
  606.                                 <div class="product-image">
  607.                                     <img src="https://res.cloudinary.com/apss-factory/image/upload/v1585907462/newprod/Album5sur5-5_zqlq4g.jpg" alt="Album Photo">
  608.                                 </div>
  609.                                 <div class="product-info">
  610.                                     <h4 class="product-title">Album Photo</h4>
  611.                                     <p class="product-desc">Format classique • Reliure souple</p>
  612.                                     <span class="product-requirement">📷 Min. 20 photos</span>
  613.                                 </div>
  614.                             </div>
  615.                             <div class="product-card" onclick="selectProduct('pochette', this)">
  616.                                 <div class="product-image">
  617.                                     <img src="https://5sur5sejour.com/images/produit/PochettePhoto5sur5-2.jpg" alt="Pochette Tirages">
  618.                                 </div>
  619.                                 <div class="product-info">
  620.                                     <h4 class="product-title">Pochette Tirages</h4>
  621.                                     <p class="product-desc">Photos 10×15 • Papier brillant</p>
  622.                                     <span class="product-requirement" style="color: #41A2AA;">✓ Toujours disponible</span>
  623.                                 </div>
  624.                             </div>
  625.                         </div>
  626.                     </div>
  627.                     
  628.                     {# Step 2: Contact Info #}
  629.                     <div class="form-step" id="step2">
  630.                         <h3 class="section-title">Vos coordonnées</h3>
  631.                         
  632.                         <div class="form-row">
  633.                             <div class="form-group">
  634.                                 <label class="form-label">Nom *</label>
  635.                                 <input type="text" name="name" id="contact_name" class="form-input" placeholder="Votre nom" required>
  636.                             </div>
  637.                             <div class="form-group">
  638.                                 <label class="form-label">Prénom *</label>
  639.                                 <input type="text" name="firstname" id="contact_firstname" class="form-input" placeholder="Votre prénom" required>
  640.                             </div>
  641.                         </div>
  642.                         
  643.                         <div class="form-row">
  644.                             <div class="form-group">
  645.                                 <label class="form-label">Email *</label>
  646.                                 <input type="email" name="email" id="contact_email" class="form-input" placeholder="votre@email.com" required>
  647.                             </div>
  648.                             <div class="form-group">
  649.                                 <label class="form-label">Téléphone *</label>
  650.                                 <input type="tel" name="phone" id="contact_phone" class="form-input" placeholder="06 00 00 00 00" required>
  651.                             </div>
  652.                         </div>
  653.                         
  654.                         <div class="form-row full">
  655.                             <div class="form-group">
  656.                                 <label class="form-label">Nom de l'établissement *</label>
  657.                                 <input type="text" name="organization" id="contact_organization" class="form-input" placeholder="École, collège, association..." required>
  658.                             </div>
  659.                         </div>
  660.                         
  661.                         <div class="form-row">
  662.                             <div class="form-group">
  663.                                 <label class="form-label">Nombre de familles estimé</label>
  664.                                 <input type="number" name="families_count" id="familyCount" class="form-input" value="10" min="1" max="500" style="text-align: center;">
  665.                             </div>
  666.                             <div class="form-group">
  667.                                 <label class="form-label">Réduction estimée</label>
  668.                                 <div class="discount-box" style="margin-top: 0; padding: 12px;">
  669.                                     <div class="discount-value" id="discountValue" style="font-size: 24px;">-10%</div>
  670.                                 </div>
  671.                             </div>
  672.                         </div>
  673.                     </div>
  674.                     
  675.                     {# Step 3: Validation #}
  676.                     <div class="form-step" id="step3">
  677.                         <h3 class="section-title">Message complémentaire</h3>
  678.                         
  679.                         <div class="form-row full">
  680.                             <div class="form-group">
  681.                                 <label class="form-label">Votre message (optionnel)</label>
  682.                                 <textarea name="message" class="form-input" rows="4" placeholder="Précisez vos besoins, dates du séjour, questions..."></textarea>
  683.                             </div>
  684.                         </div>
  685.                         
  686.                         <div class="form-row full">
  687.                             <div class="form-group">
  688.                                 <label style="display: flex; align-items: flex-start; gap: 10px; cursor: pointer;">
  689.                                     <input type="checkbox" name="consent" required style="margin-top: 4px;">
  690.                                     <span style="font-size: 13px; color: var(--text-secondary);">
  691.                                         J'accepte que mes données soient utilisées pour me recontacter concernant ma demande de commande groupée.
  692.                                     </span>
  693.                                 </label>
  694.                             </div>
  695.                         </div>
  696.                     </div>
  697.                     
  698.                 </div>
  699.                 
  700.                 {# Footer #}
  701.                 <div class="group-order-footer">
  702.                     <div class="footer-info">
  703.                         <i class="bi bi-shield-check"></i>
  704.                         <span>Réponse sous 24h • Sans engagement</span>
  705.                     </div>
  706.                     <div class="footer-actions">
  707.                         <button type="button" class="btn-back" id="btnBack" style="display: none;" onclick="prevStep()">
  708.                             <i class="bi bi-arrow-left me-2"></i> Retour
  709.                         </button>
  710.                         <button type="button" class="btn-next" id="btnNext" onclick="nextStep()">
  711.                             Suivant <i class="bi bi-arrow-right ms-2"></i>
  712.                         </button>
  713.                         <button type="submit" class="btn-submit" id="btnSubmit" style="display: none;">
  714.                             <i class="bi bi-send me-2"></i> Envoyer ma demande
  715.                         </button>
  716.                     </div>
  717.                 </div>
  718.             </form>
  719.             
  720.         </div>
  721.         
  722.         {# Info Section #}
  723.         <div class="info-section">
  724.             <h3>Comment ça fonctionne ?</h3>
  725.             <p>La commande groupée permet aux familles de bénéficier de tarifs réduits en commandant ensemble.</p>
  726.             
  727.             <div class="info-benefits">
  728.                 <div class="info-benefit">
  729.                     <div class="info-benefit-icon">
  730.                         <i class="bi bi-people"></i>
  731.                     </div>
  732.                     <h4>Regroupez les familles</h4>
  733.                     <p>Plus il y a de participants, plus la réduction est importante</p>
  734.                 </div>
  735.                 <div class="info-benefit">
  736.                     <div class="info-benefit-icon">
  737.                         <i class="bi bi-percent"></i>
  738.                     </div>
  739.                     <h4>Jusqu'à -20%</h4>
  740.                     <p>Des réductions exclusives pour les commandes groupées</p>
  741.                 </div>
  742.                 <div class="info-benefit">
  743.                     <div class="info-benefit-icon">
  744.                         <i class="bi bi-truck"></i>
  745.                     </div>
  746.                     <h4>Livraison unique</h4>
  747.                     <p>Livraison gratuite à l'adresse de votre choix</p>
  748.                 </div>
  749.             </div>
  750.         </div>
  751.         
  752.     </div>
  753. </div>
  754. {% endblock %}
  756. {% block javascript %}
  757. {{ parent() }}
  758. <script>
  759. let currentStep = 1;
  760. const totalSteps = 3;
  762. function selectProduct(value, element) {
  763.     document.querySelectorAll('.product-card').forEach(card => card.classList.remove('selected'));
  764.     element.classList.add('selected');
  765.     
  766.     // Update hidden input
  767.     const productNames = {
  768.         'livre': 'Livre Séjour',
  769.         'album': 'Album Photo',
  770.         'pochette': 'Pochette Tirages'
  771.     };
  772.     document.querySelector('input[name="product_type"]').value = productNames[value];
  773. }
  775. function showStep(step) {
  776.     // Hide all steps
  777.     document.querySelectorAll('.form-step').forEach(s => s.classList.remove('active'));
  778.     
  779.     // Show current step
  780.     document.getElementById('step' + step).classList.add('active');
  781.     
  782.     // Update progress dots
  783.     document.querySelectorAll('.step-dot').forEach((dot, index) => {
  784.         const stepNum = index + 1;
  785.         dot.classList.remove('active', 'completed');
  786.         if (stepNum === step) {
  787.             dot.classList.add('active');
  788.         } else if (stepNum < step) {
  789.             dot.classList.add('completed');
  790.         }
  791.     });
  792.     
  793.     // Update progress lines
  794.     for (let i = 1; i < totalSteps; i++) {
  795.         const line = document.getElementById('line' + i);
  796.         if (line) {
  797.             line.classList.toggle('completed', i < step);
  798.         }
  799.     }
  800.     
  801.     // Update labels
  802.     document.querySelectorAll('.step-label').forEach((label, index) => {
  803.         label.classList.toggle('active', (index + 1) === step);
  804.     });
  805.     
  806.     // Update buttons
  807.     document.getElementById('btnBack').style.display = step > 1 ? 'inline-flex' : 'none';
  808.     document.getElementById('btnNext').style.display = step < totalSteps ? 'inline-flex' : 'none';
  809.     document.getElementById('btnSubmit').style.display = step === totalSteps ? 'inline-flex' : 'none';
  810.     
  811.     currentStep = step;
  812. }
  814. function nextStep() {
  815.     // Validate step 2 (contact info)
  816.     if (currentStep === 2) {
  817.         const fields = ['contact_name', 'contact_firstname', 'contact_email', 'contact_phone', 'contact_organization'];
  818.         let isValid = true;
  819.         
  820.         fields.forEach(id => {
  821.             const el = document.getElementById(id);
  822.             if (!el.value.trim()) {
  823.                 el.classList.add('is-invalid');
  824.                 isValid = false;
  825.             } else {
  826.                 el.classList.remove('is-invalid');
  827.             }
  828.         });
  829.         
  830.         if (!isValid) {
  831.             return;
  832.         }
  833.     }
  834.     
  835.     if (currentStep < totalSteps) {
  836.         showStep(currentStep + 1);
  837.     }
  838. }
  840. function prevStep() {
  841.     if (currentStep > 1) {
  842.         showStep(currentStep - 1);
  843.     }
  844. }
  846. // Discount calculation
  847. document.getElementById('familyCount').addEventListener('input', function() {
  848.     const count = parseInt(this.value) || 0;
  849.     let discount = 0;
  850.     
  851.     if (count >= 30) discount = 20;
  852.     else if (count >= 20) discount = 15;
  853.     else if (count >= 10) discount = 10;
  854.     else if (count >= 5) discount = 5;
  855.     
  856.     document.getElementById('discountValue').textContent = `-${discount}%`;
  857. });
  859. // Form validation on submit
  860. document.getElementById('groupOrderForm').addEventListener('submit', function(e) {
  861.     const consent = document.querySelector('input[name="consent"]');
  862.     if (!consent.checked) {
  863.         e.preventDefault();
  864.         alert('Veuillez accepter les conditions pour envoyer votre demande.');
  865.     }
  866. });
  867. </script>
  868. {% endblock %}