templates/main/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  7.     <style>
  8.         body {
  9.             background-color: #0d3b79 !important;
  10.             font-family: "Montserrat", sans-serif;
  11.             font-size: 15px;
  12.             background-image: url("/assets/images/general-background.jpg");
  13.             background-repeat: no-repeat;
  14.             background-position: top center;
  15.             background-size: 100%;
  16.         }
  18.         .headerTop {
  19.             color: #FFF;
  20.             width: 100%;
  21.             height: 34px;
  22.             background-color: #161d3f;
  23.             font-family: "Montserrat", sans-serif;
  24.         }
  26.         .headerTopContent {
  27.             width: 100%;
  28.             margin-left: auto;
  29.             margin-right: auto;
  30.             padding-left: 100px;
  31.             padding-right: 100px;
  32.         }
  34.         .headerTopContent DIV {
  35.             padding-top: 5px;
  36.             float: left;
  37.         }
  39.         .headerTopContent IMG {
  40.             margin-top: -3px;
  41.         }
  43.         .headerBottom {
  44.             color: #FFF;
  45.             width: 100%;
  46.             height: 98px;
  47.             font-size: 15px !important;
  48.             background-color: rgba(0, 60, 140, 0.6);
  49.             /* Fond transparent */
  50.         }
  52.         .headerBottomContent {
  53.             padding-top: 10px;
  54.             width: 100%;
  55.             margin-left: auto;
  56.             margin-right: auto;
  57.             padding-left: 100px;
  58.             padding-right: 100px;
  59.             font-family: "Lato", sans-serif;
  60.             text-transform: uppercase;
  61.         }
  63.         a {
  64.             text-decoration: none !important;
  65.         }
  67.         #footer-copyright {
  68.             color: #003c8c !important;
  69.         }
  71.         main {
  72.             min-height: 80vh !important;
  73.         }
  75.         footer {
  76.             background: #ecf0f1;
  77.             padding-bottom: 2em;
  78.             padding-top: 2em;
  79.             display: block;
  80.         }
  82.         .contentPage {
  83.             background-color: #FFF;
  84.             color: #0d3b79;
  85.             width: 98%;
  86.             margin-left: auto;
  87.             margin-right: auto;
  88.             margin-top: 175px;
  89.         }
  91.         .texteBleu A {
  92.             color: #78c8e6 !important;
  93.         }
  95.         .texteBlanc A {
  96.             color: #FFFFFF !important;
  97.         }
  99.         .navbar-light .navbar-nav .nav-link {
  100.             color: #78c8e6;
  101.         }
  103.         .nav-item a {
  104.             color: #78c8e6;
  105.         }
  107.         .souligne-title::after {
  108.             content: "";
  109.             position: relative;
  110.             bottom: 0px;
  111.             left: 0px;
  112.             width: 80px;
  113.             /* Longueur de la barre bleue */
  114.             height: 6px;
  115.             /* Épaisseur de la barre bleue */
  116.             background-color: #006ec8;
  117.             /* Couleur de la barre bleue */
  118.             display: block;
  119.         }
  121.         .souligne::after {
  122.             content: "";
  123.             position: relative;
  124.             top: 32px;
  125.             width: 70px;
  126.             /* Longueur de la barre bleue */
  127.             height: 4px;
  128.             /* Épaisseur de la barre bleue */
  129.             background-color: #006ec8;
  130.             /* Couleur de la barre bleue */
  131.             display: block;
  132.         }
  134.         .souligne, .souligne-tile {
  135.             margin-bottom: 10px;
  136.         }
  138.         h1 {
  139.             font-family: "Montserrat", sans-serif;
  140.             font-size: 32pt !important;
  141.             font-weight: bold;
  142.             color: #FFF;
  143.         }
  145.         h2 {
  146.             font-family: "Montserrat", sans-serif;
  147.             font-size: 22pt;
  148.             font-weight: normal;
  149.             color: #003c8c;
  150.         }
  152.         h3 {
  153.             color: #FFF;
  154.         }
  156.         label {
  157.             color: #FFF;
  158.         }
  160.         .contact-container {
  161.             color: #FFF;
  162.         }
  164.         .contact-container label {
  165.             color: #003c8c !important;
  166.         }
  168.         .info-sav {
  169.             font-family: "Montserrat", sans-serif;
  170.             font-size: 22pt;
  171.             color: #FFF;
  172.         }
  174.         .blocContact {
  175.             padding: 10px;
  176.             background-color: #FFF;
  177.             color: #0c2352;
  178.         }
  180.         .blocContact input {
  181.             background-color: #FFF;
  182.         !important;
  183.             border-radius: 0px !important;
  184.             border: solid 1px #e5e5e5 !important;
  185.         }
  187.         .blocContact label {
  188.             font-weight: normal;
  189.         }
  191.         .blocFormHeader {
  192.             text-align: left !important;
  193.             padding-left: 40px;
  194.             padding-right: 40px;
  195.         }
  197.         .logo-reseaux {
  198.             margin-left: 15px;
  199.         }
  201.         .btnContact, .btnFormBlue {
  202.             margin-top: 10px;
  203.             background-color: #006ec8 !important;
  204.             border-radius: 30px !important;
  205.             border: 0px !important;
  206.             margin: 5px;
  207.         }
  209.         .navbar-default {
  210.             margin-top: 55px;
  211.             background-color: transparent;
  212.             border-color: transparent;
  213.         }
  215.         .page {
  216.             margin-top: 175px;
  217.             background-color: rgba(239, 239, 239, 0.5);
  218.             padding: 15px;
  219.             width: 80%;
  220.         }
  222.         .center {
  223.             text-align: center;
  224.             margin-left: auto;
  225.             margin-right: auto;
  226.         }
  228.         .body-container {
  229.             flex: 1;
  230.             min-height: 600px;
  231.         }
  233.         .container-min {
  234.             margin-left: auto;
  235.             margin-right: auto;
  236.             padding-left: 15px;
  237.             padding-right: 15px;
  238.         }
  240.         .contact-container {
  241.             color: #FFF;
  242.             background-color: #153065;
  243.             padding-top: 15px;
  244.         }
  246.         .contact-container label {
  247.             color: #003c8c !important;
  248.         }
  250.         .info-sav {
  251.             font-family: "Montserrat", sans-serif;
  252.             font-size: 22pt;
  253.             color: #FFF;
  254.         }
  256.         .blocForm {
  257.             padding: 35px;
  258.             width: 100%;
  259.             max-width: 1024px;
  260.             margin-left: auto;
  261.             margin-right: auto;
  262.             background-color: #FFF;
  263.         }
  265.         .blocForm input, .blocForm textarea, .blocForm select {
  266.             background-color: #e2f3fa !important;
  267.             border-radius: 30px !important;
  268.             border: 0px !important;
  269.             color: #003c8c !important;
  270.         }
  272.         .blocContact {
  273.             padding: 10px;
  274.             background-color: #FFF;
  275.             color: #0c2352;
  276.         }
  278.         .blocContact input {
  279.             background-color: #FFF;
  280.         !important;
  281.             border-radius: 0px !important;
  282.             border: solid 1px #e5e5e5 !important;
  283.         }
  285.         .blocContact label {
  286.             font-weight: normal;
  287.         }
  289.         .blocFormHeader {
  290.             text-align: left !important;
  291.             padding-left: 40px;
  292.             padding-right: 40px;
  293.         }
  295.         .logo-reseaux {
  296.             margin-left: 15px;
  297.         }
  299.         .btnContact, .btnFormBlue {
  300.             margin-top: 10px;
  301.             background-color: #006ec8 !important;
  302.             border-radius: 30px !important;
  303.             border: 0px !important;
  304.             margin: 5px;
  305.         }
  306.     </style>
  308.     <style>
  309.         body {
  310.             font-family: Varela, sans-serif;
  311.             color: #2b4b78;
  312.         }
  314.         .container {
  315.             padding-right: 85px;
  316.             padding-left: 85px;
  317.         }
  319.         h1 {
  320.             font-family: "Montserrat", sans-serif;
  321.             font-size: 44pt;
  322.             font-weight: bold;
  323.             color: #003c8c;
  324.         }
  326.         h2 {
  327.             font-family: "Montserrat", sans-serif;
  328.             font-size: 20pt;
  329.             font-weight: normal !important;
  330.             color: #003c8c;
  331.         }
  333.         h3 {
  334.             color: #003c8c;
  335.         }
  337.         label {
  338.             font-family: "Montserrat", sans-serif;
  339.             color: #003c8c;
  340.             font-size: 14pt;
  341.             font-weight: bold;
  342.         }
  344.         #search_products_form_submit {
  345.             background-color: #003c8c;
  346.         }
  348.         .headerTxt {
  349.             font-size: 18pt;
  350.             font-family: "Montserrat", sans-serif;
  351.             color: #003c8c;
  352.         }
  354.         .mainReference {
  355.             font-family: "Montserrat", sans-serif;
  356.             background-color: #003c8c;
  357.             color: #FFF;
  358.             padding: 5px;
  359.             font-size: 22pt;
  360.         }
  362.         .spacerTop {
  363.             margin-top: 15px
  364.         }
  366.         .options {
  367.             font-family: "Montserrat", sans-serif;
  368.             font-size: 13pt;
  369.             color: #003c8c;
  370.             font-weight: bold;
  371.             border-bottom: solid 1px #78c8e6;
  372.         }
  374.         .collapsible {
  375.             background-color: #FFF;
  376.             font-family: "Montserrat", sans-serif;
  377.             font-size: 13pt;
  378.             color: #003c8c;
  379.             cursor: pointer;
  380.             padding: 18px;
  381.             width: 100%;
  382.             border: none;
  383.             text-align: left;
  384.             outline: none;
  385.         }
  387.         .activeCollapsible, .collapsible:hover {
  388.             font-weight: bolder;
  389.         }
  391.         .collapsible:after {
  392.             content: '\002B';
  393.             color: #003c8c;
  394.             font-weight: bold;
  395.             float: right;
  396.             margin-left: 5px;
  397.         }
  399.         .activeCollapsible:after {
  400.             content: "\2212";
  401.         }
  403.         .content {
  404.             padding: 0 18px;
  405.             max-height: 0;
  406.             overflow: hidden;
  407.             transition: max-height 0.2s ease-out;
  408.         }
  410.         .productTable {
  411.             font-family: "Montserrat", sans-serif;
  412.             font-size: 12pt;
  413.             color: #505050;
  414.             background-color: #FFF;
  415.             border-spacing: 2px;
  416.             border-collapse: separate;
  417.         }
  419.         .productTable TH {
  420.             background-color: #e5e5e5;
  421.             text-align: center;
  422.             padding: 3px;
  423.             font-weight: bold;
  424.         }
  426.         .productTable TD {
  427.             margin: 2px;
  428.             text-align: center;
  429.             border-bottom: solid 1px #e5e5e5;
  430.         }
  432.         .productTable TR {
  433.             border-bottom: solid 1px #e5e5e5;
  434.         }
  436.         .padding-header {
  437.             padding-top: 75px !important;
  438.         }
  440.         #search_products_form_submit {
  441.             display: none;
  442.         }
  443.     </style>
  446.     <style>
  447.         /* Grille résultats : produits à gauche, accessoires à droite */
  448.         .result-row {
  449.             display: flex;
  450.             gap: 30px;
  451.             align-items: flex-start;
  452.             margin-bottom: 40px;
  453.             clear: both;
  454.         }
  456.         .result-row .col-produits,
  457.         .result-row .col-accessoires {
  458.             flex: 1 1 0;
  459.             min-width: 0;
  460.         }
  462.         .result-row .card {
  463.             width: 100%;
  464.             max-width: 400px;
  465.             height: auto;
  466.             margin-bottom: 20px;
  467.         }
  469.         .result-row .card img.card-img-top {
  470.             width: 100%;
  471.             height: 220px;
  472.             object-fit: contain;
  473.             padding: 15px;
  474.         }
  476.         @media (max-width: 768px) {
  477.             .result-row {
  478.                 flex-direction: column;
  479.             }
  480.         }
  482.         /* ── Mobile et tablette ──
  483.            Ces deux valeurs sont posées plus haut dans ce même fichier et
  484.            l'emportent sur `base.html.twig` : c'est donc ici qu'il faut les
  485.            corriger, pas dans le gabarit parent.
  487.            - `h1` à 32pt (42px) tient sur trois lignes et occupe la moitié de
  488.              l'écran d'un téléphone. 20pt le ramène à deux lignes.
  489.            - `.padding-header` ajoutait 75px de rembourrage blanc à l'intérieur
  490.              du bloc, en plus des marges de `base.html.twig`. C'est la seule des
  491.              trois valeurs qu'on peut réduire : les marges au-dessus laissent
  492.              voir le bandeau photo de fond entre l'en-tête fixe et le bloc blanc,
  493.              les toucher le ferait disparaître. */
  494.         @media screen and (max-width: 1184px) {
  495.             h1 {
  496.                 font-size: 20pt !important;
  497.                 line-height: 1.25;
  498.             }
  499.             .padding-header {
  500.                 /* Marge et rembourrage sont tous deux à l'intérieur du bloc blanc :
  501.                    les réduire ne rogne pas le bandeau photo, qui s'arrête au début
  502.                    de `.contentPage`. */
  503.                 margin-top: 8px !important;
  504.                 padding-top: 16px !important;
  505.             }
  506.         }
  507.     </style>
  509.     <main class="container padding-header">
  510.         <section class="row">
  512.             <div class="col-12 spacerTop">
  513.                 <h1><span class="souligne-title">Bienvenue dans le LORRAIN SELECT </span></h1>
  514.             </div>
  517.             <div class="blocForm">
  518.                 {{ form_start(searchProductsForm, {'attr': {'id': 'search_products_form'}}) }}
  520.                 <div class="mb3">
  522.                     {% set valeursDistinctesColA = [] %}
  523.                     {# Boucle à travers les éléments de l'objet catalogueImports #}
  524.                     {% for element in catalogueImports %}
  525.                         {# Vérifie si la valeur de colA n'est pas déjà dans le tableau des valeurs distinctes #}
  526.                         {% if element.colA not in valeursDistinctesColA and element.colA is not empty %}
  527.                             {# Ajoutez la valeur de colA au tableau des valeurs distinctes #}
  528.                             {% set valeursDistinctesColA = valeursDistinctesColA|merge([element.colA]) %}
  529.                         {% endif %}
  530.                     {% endfor %}
  531.                     <label id="labelA" class="form-label" for="questionA">Quel produit recherchez-vous ?</label>
  532.                     <select id="questionA" name="questionA" class="form-select">
  533.                         <option value="">Choisir une option</option>
  534.                         {% for valeurDistinctesColA in valeursDistinctesColA %}
  535.                             <option {% if questionAValue == valeurDistinctesColA %} selected="selected"{% endif %}
  536.                                     value="{{ valeurDistinctesColA }}">{{ valeurDistinctesColA }}</option>
  537.                         {% endfor %}
  538.                     </select>
  540.                     {% if isAnswerBEnabled is not empty %}
  541.                         {% set valeursDistinctesColB = [] %}
  542.                         {# Boucle à travers les éléments de l'objet catalogueImports #}
  543.                         {% for element in catalogueImports %}
  544.                             {% if isAnswerBEnabled %}
  545.                                 {% if questionAValue == element.colA %}
  546.                                     {# Vérifie si la valeur de colB n'est pas déjà dans le tableau des valeurs distinctes #}
  547.                                     {% if element.colB not in valeursDistinctesColB and element.colB is not empty %}
  548.                                         {# Ajoutez la valeur de colB au tableau des valeurs distinctes #}
  549.                                         {% set valeursDistinctesColB = valeursDistinctesColB|merge([element.colB]) %}
  550.                                     {% endif %}
  551.                                 {% endif %}
  552.                             {% endif %}
  553.                         {% endfor %}
  554.                         {% if valeursDistinctesColB|length > 0 %}
  555.                             <label id="labelB" class="form-label" for="questionB">
  556.                                 {% if questionAValue == "Chalumeau" %}
  557.                                     Quelles actions souhaitez vous réaliser ?
  558.                                 {% else %}
  559.                                     Quelle application souhaitez vous réaliser ?
  560.                                 {% endif %}
  561.                             </label>
  563.                             <select id="questionB" name="questionB" class="form-select">
  564.                                 <option value="">Choisir une option</option>
  565.                                 {% set valeursDistinctesColBTriees = valeursDistinctesColB|sort %}
  566.                                 {% for valeurDistinctesColB in valeursDistinctesColBTriees %}
  567.                                     <option {% if questionBValue == valeurDistinctesColB %} selected="selected"{% endif %}
  568.                                             value="{{ valeurDistinctesColB }}">{{ valeurDistinctesColB }}</option>
  569.                                 {% endfor %}
  570.                             </select>
  571.                         {% endif %}
  572.                     {% endif %}
  574.                     {% if isAnswerCEnabled is not empty %}
  576.                         {% set valeursDistinctesColC = [] %}
  577.                         {# Boucle à travers les éléments de l'objet catalogueImports #}
  578.                         {% for element in catalogueImports %}
  579.                             {% if isAnswerCEnabled %}
  580.                                 {% if questionAValue == element.colA and questionBValue == element.colB %}
  581.                                     {# Vérifie si la valeur de colC n'est pas déjà dans le tableau des valeurs distinctes #}
  582.                                     {% if element.colC not in valeursDistinctesColC and element.colC is not empty %}
  583.                                         {# Ajoutez la valeur de colC au tableau des valeurs distinctes #}
  584.                                         {% set valeursDistinctesColC = valeursDistinctesColC|merge([element.colC]) %}
  585.                                     {% endif %}
  586.                                 {% endif %}
  587.                             {% endif %}
  588.                         {% endfor %}
  590.                         {% if questionAValue != "Chalumeau" or (questionAValue == "Chalumeau" and questionCValue != "-") %}
  591.                             {% if valeursDistinctesColC|length > 0 %}
  592.                                 <label id="labelC" class="form-label" for="questionC">
  593.                                     {% if questionAValue == "Chalumeau" %}
  594.                                         Oxygène de coupe avec robinet ou gâchette ?
  595.                                     {% else %}
  596.                                         Quel est le gaz utilisé ?
  597.                                     {% endif %}
  598.                                 </label>
  600.                                 <select id="questionC" name="questionC" class="form-select">
  601.                                     <option value="">Choisir une option</option>
  602.                                     {% set valeursDistinctesColCTriees = valeursDistinctesColC|sort %}
  603.                                     {% if questionAValue == "Chalumeau" %}
  604.                                         {% set valeursDistinctesColCTriees = valeursDistinctesColC
  605.                                             |map(v => v|replace({',': '.'}))
  606.                                             |map(v => v matches '/^\d+(\.\d+)?$/' ? (v + 0) : v)
  607.                                             |sort
  608.                                             |map(v => v|replace({'.': ','})) %}
  609.                                     {% endif %}
  610.                                     {% for valeurDistinctesColC in valeursDistinctesColCTriees %}
  611.                                         <option {% if questionCValue == valeurDistinctesColC %} selected="selected"{% endif %}
  612.                                                 value="{{ valeurDistinctesColC }}">{{ valeurDistinctesColC }}</option>
  613.                                     {% endfor %}
  614.                                 </select>
  615.                             {% endif %}
  616.                         {% endif %}
  617.                     {% endif %}
  619.                     {% if isAnswerDEnabled is not empty %}
  621.                         {% set valeursDistinctesColD = [] %}
  623.                         {% set catalogueImportsTrie = catalogueImports|sort((a, b) => a.sortD <=> b.sortD) %}
  625.                         {# Boucle à travers les éléments de l'objet catalogueImports #}
  626.                         {% for element in catalogueImportsTrie %}
  627.                             {% if isAnswerDEnabled %}
  628.                                 {% if questionAValue == element.colA and questionBValue == element.colB and (questionCValue == element.colC or questionCValue == "-") %}
  629.                                     {# Vérifie si la valeur de colD n'est pas déjà dans le tableau des valeurs distinctes #}
  630.                                     {% if element.colD not in valeursDistinctesColD and element.colD is not null and element.colD is not empty %}
  631.                                         {# Ajoutez la valeur de colD au tableau des valeurs distinctes #}
  632.                                         {% set valeursDistinctesColD = valeursDistinctesColD|merge([element.colD]) %}
  633.                                     {% endif %}
  634.                                 {% endif %}
  635.                             {% endif %}
  636.                         {% endfor %}
  637.                         {% if valeursDistinctesColD|length > 0 %}
  638.                             <label id="labelD" class="form-label" for="questionD">
  639.                                 {% if questionAValue == "Chalumeau" %}
  640.                                     Quel est le gaz utilisé ?
  641.                                 {% else %}
  642.                                     Quelle pression est utilisée ?
  643.                                 {% endif %}
  644.                             </label>
  645.                             <select id="questionD" name="questionD" class="form-select">
  646.                                 <option value="">Choisir une option</option>
  647.                                 {% set valeursDistinctesColDTriees = valeursDistinctesColD %}
  648.                                 {% for valeurDistinctesColD in valeursDistinctesColDTriees %}
  649.                                     <option {% if questionDValue == valeurDistinctesColD %} selected="selected"{% endif %}
  650.                                             value="{{ valeurDistinctesColD }}">{{ valeurDistinctesColD }}</option>
  651.                                 {% endfor %}
  652.                             </select>
  653.                         {% endif %}
  654.                     {% endif %}
  656.                     {% if isAnswerEEnabled is not empty or (valeursDistinctesColD is defined and valeursDistinctesColD|length < 1) %}
  657.                         {% set valeursDistinctesColE = [] %}
  658.                         {# Boucle à travers les éléments de l'objet catalogueImports #}
  660.                         {% set catalogueImportsTrie = catalogueImports|sort((a, b) => a.sortE <=> b.sortE) %}
  662.                         {% for element in catalogueImportsTrie %}
  663.                             {% if isAnswerEEnabled is not empty or (valeursDistinctesColD is defined and valeursDistinctesColD|length < 1) %}
  664.                                 {% if questionAValue == element.colA
  665.                                     and questionBValue == element.colB
  666.                                     and (questionCValue == element.colC or questionCValue == "-")
  667.                                     and questionDValue == element.colD %}
  668.                                     {# Vérifie si la valeur de colE n'est pas déjà dans le tableau des valeurs distinctes #}
  669.                                     {% if element.colE not in valeursDistinctesColE and element.colE is not empty %}
  670.                                         {# Ajoutez la valeur de colE au tableau des valeurs distinctes #}
  671.                                         {% set valeursDistinctesColE = valeursDistinctesColE|merge([element.colE]) %}
  672.                                     {% endif %}
  673.                                 {% endif %}
  674.                             {% endif %}
  675.                         {% endfor %}
  676.                         {% if valeursDistinctesColE|length > 0 %}
  677.                             <label id="labelE" class="form-label" for="questionE">
  678.                                 {% if questionAValue == "Chalumeau" %}
  679.                                     Quelle épaisseur maximum à souder/chauffer/braser en mm ?
  680.                                 {% else %}
  681.                                     Quel débit est nécessaire ?
  682.                                 {% endif %}
  683.                             </label>
  684.                             <select id="questionE" name="questionE" class="form-select">
  685.                                 <option value="">Choisir une option</option>
  686.                                 {% set valeursDistinctesColETriees = valeursDistinctesColE %}
  687.                                 {% for valeurDistinctesColE in valeursDistinctesColETriees %}
  688.                                     <option {% if questionEValue == valeurDistinctesColE %} selected="selected"{% endif %}
  689.                                             value="{{ valeurDistinctesColE }}">{{ valeurDistinctesColE }}</option>
  690.                                 {% endfor %}
  691.                             </select>
  692.                         {% endif %}
  693.                     {% endif %}
  696.                     {% if (isAnswerFEnabled is not empty) or (valeursDistinctesColE is defined and valeursDistinctesColE|length < 1) %}
  699.                         {% set valeursAvecSortF = [] %}
  701.                         {% set catalogueImportsTrie = catalogueImports|sort((a, b) => a.sortF <=> b.sortF) %}
  703.                         {% for element in catalogueImportsTrie %}
  704.                             {% if isAnswerFEnabled or (valeursDistinctesColE is defined and valeursDistinctesColE|length < 1) %}
  705.                                 {% if questionAValue == element.colA
  706.                                     and questionBValue == element.colB
  707.                                     and (questionCValue == element.colC or questionCValue == "-")
  708.                                     and questionDValue == element.colD
  709.                                     and questionEValue == element.colE %}
  711.                                     {% if element.colF is not empty and not (element.colF in valeursAvecSortF|column(0)) %}
  712.                                         {% set valeursAvecSortF = valeursAvecSortF|merge([[element.colF, element.sortF]]) %}
  713.                                     {% endif %}
  714.                                 {% endif %}
  715.                             {% endif %}
  716.                         {% endfor %}
  719.                         {# Extraire uniquement les colF triés #}
  720.                         {% set valeursDistinctesColF = valeursAvecSortF|map(v => v[0]) %}
  722.                         {% if valeursDistinctesColF|length > 0 %}
  723.                             <label id="labelF" class="form-label" for="questionF">
  724.                                 {% if questionAValue == "Chalumeau" %}
  725.                                     Avec ou sans ARPF (Anti-Retour Pare Flamme) ?
  726.                                 {% else %}
  727.                                     Quelle opération souhaitez-vous réaliser ?
  728.                                 {% endif %}
  729.                             </label>
  730.                             <select id="questionF" name="questionF" class="form-select">
  731.                                 <option value="">Choisir une option</option>
  733.                                 {% for valeurDistinctesColF in valeursDistinctesColF %}
  734.                                     <option {% if questionFValue == valeurDistinctesColF %} selected="selected"{% endif %}
  735.                                             value="{{ valeurDistinctesColF }}">{{ valeurDistinctesColF }}</option>
  736.                                 {% endfor %}
  737.                             </select>
  738.                         {% endif %}
  739.                     {% endif %}
  741.                     {% if isAnswerGEnabled is not empty or (valeursDistinctesColF is defined and valeursDistinctesColF|length < 1) %}
  743.                         {% set valeursDistinctesColG = [] %}
  745.                         {# Boucle à travers les éléments de l'objet catalogueImports #}
  747.                         {% set catalogueImportsTrie = catalogueImports|sort((a, b) => a.sortG <=> b.sortG) %}
  749.                         {% for element in catalogueImportsTrie %}
  750.                             {% if isAnswerGEnabled or (valeursDistinctesColF is defined and valeursDistinctesColF|length < 1) %}
  751.                                 {% if questionAValue == element.colA
  752.                                     and questionBValue == element.colB
  753.                                     and (questionCValue == element.colC or questionCValue == "-")
  754.                                     and questionDValue == element.colD
  755.                                     and questionEValue == element.colE
  756.                                     and (questionFValue == element.colF or questionFValue == "-") %}
  757.                                     {# Vérifie si la valeur de colG n'est pas déjà dans le tableau des valeurs distinctes #}
  758.                                     {% if element.colG not in valeursDistinctesColG and element.colG is not empty %}
  759.                                         {# Ajoutez la valeur de colG au tableau des valeurs distinctes #}
  760.                                         {% set valeursDistinctesColG = valeursDistinctesColG|merge([element.colG]) %}
  761.                                     {% endif %}
  762.                                 {% endif %}
  763.                             {% endif %}
  764.                         {% endfor %}
  765.                         {% if valeursDistinctesColG|length > 0 %}
  766.                             <label id="labelG" class="form-label" for="questionG">
  767.                                 {% if questionAValue == "Chalumeau" %}
  768.                                     Quelle est l'inclinaison du coude en degrés ?
  769.                                 {% else %}
  770.                                     Où souhaitez-vous réaliser votre opération ?
  771.                                 {% endif %}
  772.                             </label>
  773.                             <select id="questionG" name="questionG" class="form-select">
  774.                                 <option value="">Choisir une option</option>
  775.                                 {% set valeursDistinctesColGTriees = valeursDistinctesColG %}
  776.                                 {% for valeurDistinctesColG in valeursDistinctesColGTriees %}
  777.                                     <option {% if questionGValue == valeurDistinctesColG %} selected="selected"{% endif %}
  778.                                             value="{{ valeurDistinctesColG }}">{{ valeurDistinctesColG }}</option>
  779.                                 {% endfor %}
  780.                             </select>
  781.                         {% endif %}
  782.                     {% endif %}
  784.                     {% if isAnswerHEnabled is not empty  %}
  785.                         {% set valeursDistinctesColH = [] %}
  786.                         {# Boucle à travers les éléments de l'objet catalogueImports #}
  788.                         {% set catalogueImportsTrie = catalogueImports|sort((a, b) => a.sortH <=> b.sortH) %}
  790.                         {% for element in catalogueImportsTrie %}
  791.                             {% if isAnswerHEnabled %}
  792.                                 {% if questionAValue == element.colA
  793.                                     and questionBValue == element.colB
  794.                                     and (questionCValue == element.colC or questionCValue == "-")
  795.                                     and questionDValue == element.colD
  796.                                     and questionEValue == element.colE
  797.                                     and (questionFValue == element.colF or questionFValue == "-")
  798.                                     and questionGValue == element.colG %}
  799.                                     {# Vérifie si la valeur de colH n'est pas déjà dans le tableau des valeurs distinctes #}
  800.                                     {% if element.colH not in valeursDistinctesColH and element.colH is not empty %}
  801.                                         {# Ajoutez la valeur de colH au tableau des valeurs distinctes #}
  802.                                         {% set valeursDistinctesColH = valeursDistinctesColH|merge([element.colH]) %}
  803.                                     {% endif %}
  804.                                 {% endif %}
  805.                             {% endif %}
  806.                         {% endfor %}
  807.                         {% if valeursDistinctesColH|length > 0 %}
  808.                             <label id="labelH" class="form-label" for="questionH">
  809.                                 {% if questionAValue == "Chalumeau" %}
  810.                                     Quelle longueur chalumeau en mm ?
  811.                                 {% else %}
  812.                                     Sur quelle installation travaillez-vous ?
  813.                                 {% endif %}
  814.                             </label>
  815.                             <select id="questionH" name="questionH" class="form-select">
  816.                                 <option value="">Choisir une option</option>
  817.                                 {% set valeursDistinctesColHTriees = valeursDistinctesColH %}
  818.                                 {% for valeurDistinctesColH in valeursDistinctesColHTriees %}
  819.                                     <option {% if questionHValue == valeurDistinctesColH %} selected="selected"{% endif %}
  820.                                             value="{{ valeurDistinctesColH }}">{{ valeurDistinctesColH }}</option>
  821.                                 {% endfor %}
  822.                             </select>
  823.                         {% endif %}
  824.                     {% endif %}
  826.                     {% if isAnswerIEnabled is not empty or (questionAValue != "Chalumeau" and valeursDistinctesColH is defined and valeursDistinctesColH|length < 1) %}
  827.                         {% set valeursDistinctesColI = [] %}
  828.                         {# Boucle à travers les éléments de l'objet catalogueImports #}
  829.                         {% for element in catalogueImports %}
  830.                             {% if isAnswerIEnabled or (valeursDistinctesColH is defined and valeursDistinctesColH|length < 1) %}
  831.                                 {% if questionAValue == element.colA
  832.                                     and questionBValue == element.colB
  833.                                     and (questionCValue == element.colC or questionCValue == "-")
  834.                                     and questionDValue == element.colD
  835.                                     and questionEValue == element.colE
  836.                                     and (questionFValue == element.colF or questionFValue == "-")
  837.                                     and questionGValue == element.colG
  838.                                     and questionHValue == element.colH %}
  839.                                     {# Vérifie si la valeur de colI n'est pas déjà dans le tableau des valeurs distinctes #}
  840.                                     {% if element.colI not in valeursDistinctesColI and element.colI is not empty %}
  841.                                         {# Ajoutez la valeur de colI au tableau des valeurs distinctes #}
  842.                                         {% set valeursDistinctesColI = valeursDistinctesColI|merge([element.colI]) %}
  843.                                     {% endif %}
  844.                                 {% endif %}
  845.                             {% endif %}
  846.                         {% endfor %}
  847.                         {% if valeursDistinctesColI|length > 0 %}
  848.                             <label id="labelI" class="form-label" for="questionI">
  849.                                 {% if questionAValue == "Chalumeau" %}
  850.                                     Quelle longueur chalumeau en mm ?
  851.                                 {% else %}
  852.                                     Comment voulez-vous travailler ?
  853.                                 {% endif %}
  854.                             </label>
  855.                             <select id="questionI" name="questionI" class="form-select">
  856.                                 <option value="">Choisir une option</option>
  857.                                 {% set valeursDistinctesColITriees = valeursDistinctesColI|sort %}
  858.                                 {% for valeurDistinctesColI in valeursDistinctesColITriees %}
  859.                                     <option {% if questionIValue == valeurDistinctesColI %} selected="selected"{% endif %}
  860.                                             value="{{ valeurDistinctesColI }}">{{ valeurDistinctesColI }}</option>
  861.                                 {% endfor %}
  862.                             </select>
  863.                         {% endif %}
  864.                     {% endif %}
  866.                     {% if isAnswerJEnabled is not empty or (valeursDistinctesColI is defined and valeursDistinctesColI|length < 1) %}
  867.                         {% set valeursDistinctesColJ = [] %}
  868.                         {# Boucle à travers les éléments de l'objet catalogueImports #}
  869.                         {% for element in catalogueImports %}
  870.                             {% if isAnswerJEnabled or (valeursDistinctesColI is defined and valeursDistinctesColI|length < 1) %}
  872.                                 {% if questionAValue == element.colA
  873.                                     and questionBValue == element.colB
  874.                                     and (questionCValue == element.colC or questionCValue == "-")
  875.                                     and questionDValue == element.colD
  876.                                     and questionEValue == element.colE
  877.                                     and (questionFValue == element.colF or questionFValue == "-")
  878.                                     and questionGValue == element.colG
  879.                                     and (questionIValue == element.colI or questionIValue == "-") %}
  880.                                     {# Vérifie si la valeur de colJ n'est pas déjà dans le tableau des valeurs distinctes #}
  881.                                     {% if element.colJ not in valeursDistinctesColJ and element.colJ is not empty %}
  882.                                         {# Ajoutez la valeur de colJ au tableau des valeurs distinctes #}
  883.                                         {% set valeursDistinctesColJ = valeursDistinctesColJ|merge([element.colJ]) %}
  884.                                     {% endif %}
  885.                                 {% endif %}
  886.                             {% endif %}
  887.                         {% endfor %}
  888.                         {% if valeursDistinctesColJ|length > 0 %}
  889.                             <label id="labelJ" class="form-label" for="questionJ">
  890.                                 {% if questionAValue == "Chalumeau" %}
  891.                                     ACCESSOIRE
  892.                                 {% else %}
  893.                                     Quel raccord de sortie avez-vous besoin ?
  894.                                 {% endif %}
  895.                             </label>
  896.                             <select id="questionJ" name="questionJ" class="form-select">
  897.                                 <option value="">Choisir une option</option>
  898.                                 {% set valeursDistinctesColJTriees = valeursDistinctesColJ|sort %}
  899.                                 {% for valeurDistinctesColJ in valeursDistinctesColJTriees %}
  900.                                     <option {% if questionJValue == valeurDistinctesColJ %} selected="selected"{% endif %}
  901.                                             value="{{ valeurDistinctesColJ }}">{{ valeurDistinctesColJ }}</option>
  902.                                 {% endfor %}
  903.                             </select>
  904.                         {% endif %}
  905.                     {% endif %}
  907.                     {% if isAnswerKEnabled is not empty or (valeursDistinctesColJ is defined and valeursDistinctesColJ|length < 1) %}
  908.                         <input type="hidden" name="lastEmpty" value="empty">
  909.                     {% endif %}
  911.                     {% if isAnswerKEnabled is not empty %}
  912.                         {% set valeursDistinctesColK = [] %}
  913.                         {# Boucle à travers les éléments de l'objet catalogueImports #}
  914.                         {% for element in catalogueImports %}
  915.                             {% if isAnswerKEnabled %}
  916.                                 {% if questionAValue == element.colA
  917.                                     and questionBValue == element.colB
  918.                                     and (questionCValue == element.colC or questionCValue == "-")
  919.                                     and questionDValue == element.colD
  920.                                     and questionEValue == element.colE
  921.                                     and (questionFValue == element.colF or questionFValue == "-")
  922.                                     and questionGValue == element.colG
  923.                                     and questionHValue == element.colH
  924.                                     and (questionIValue == element.colI or questionIValue == "-")
  925.                                     and questionJValue == element.colJ %}
  926.                                     {# Vérifie si la valeur de colK n'est pas déjà dans le tableau des valeurs distinctes #}
  927.                                     {% if element.colK not in valeursDistinctesColK and element.colK is not empty %}
  928.                                         {# Ajoutez la valeur de colK au tableau des valeurs distinctes #}
  929.                                         {% set valeursDistinctesColK = valeursDistinctesColK|merge([element.colK]) %}
  930.                                     {% endif %}
  931.                                 {% endif %}
  932.                             {% endif %}
  933.                         {% endfor %}
  934.                         {% if valeursDistinctesColK|length > 0 %}
  935.                             <label id="labelK" class="form-label" for="questionK">Quel produit recherchez-vous ?</label>
  936.                             <select id="questionK" name="questionK" class="form-select">
  937.                                 <option value="">Choisir une option</option>
  938.                                 {% set valeursDistinctesColKTriees = valeursDistinctesColK|sort %}
  939.                                 {% for valeurDistinctesColK in valeursDistinctesColKTriees %}
  940.                                     <option {% if questionKValue == valeurDistinctesColK %} selected="selected"{% endif %}
  941.                                             value="{{ valeurDistinctesColK }}">{{ valeurDistinctesColK }}</option>
  942.                                 {% endfor %}
  943.                             </select>
  944.                         {% endif %}
  945.                     {% endif %}
  947.                     <input type="hidden" id="productSelected" name="productSelected">
  950.                 </div>
  952.                 {{ form_end(searchProductsForm) }}
  953.             </div>
  955.             <div id="blocProductDetail">
  957.                 {# ---- Retour rapide sur la pertinence de la recommandation ----
  958.                      Affiché seulement s'il y a effectivement quelque chose à juger. #}
  959.                 {% if trackedSearch is defined and trackedSearch is not null
  960.                     and ((products is not null and products is not empty)
  961.                          or (products2 is not null and products2 is not empty)) %}
  962.                     <div id="select-feedback" data-search-id="{{ trackedSearch.id }}">
  963.                         <p class="sf-question">Cette recommandation vous a-t-elle été utile&nbsp;?</p>
  964.                         <div class="sf-buttons">
  965.                             <button type="button" class="sf-btn" data-value="1">
  966.                                 <span aria-hidden="true">👍</span> Oui, elle correspond à mon besoin
  967.                             </button>
  968.                             <button type="button" class="sf-btn" data-value="-1">
  969.                                 <span aria-hidden="true">👎</span> Non, elle ne correspond pas
  970.                             </button>
  971.                         </div>
  972.                         <p class="sf-thanks" hidden>Merci, votre retour est enregistré.</p>
  973.                     </div>
  975.                     <style>
  976.                         #select-feedback {
  977.                             background: #fff; border: 1px solid #e5e5e5; border-radius: 10px;
  978.                             padding: 16px 20px; margin: 0 0 24px; text-align: center;
  979.                         }
  980.                         #select-feedback .sf-question {
  981.                             margin: 0 0 12px; font-weight: 600; color: #0d3b79; font-size: 0.95rem;
  982.                         }
  983.                         #select-feedback .sf-buttons {
  984.                             display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  985.                         }
  986.                         #select-feedback .sf-btn {
  987.                             border: 1px solid #006ec8; background: #fff; color: #006ec8;
  988.                             border-radius: 6px; padding: 8px 16px; font-size: 0.88rem;
  989.                             cursor: pointer; transition: background .15s ease, color .15s ease;
  990.                         }
  991.                         #select-feedback .sf-btn:hover { background: #006ec8; color: #fff; }
  992.                         #select-feedback .sf-btn[disabled] { opacity: .45; cursor: default; }
  993.                         #select-feedback .sf-btn.sf-chosen { background: #006ec8; color: #fff; }
  994.                         #select-feedback .sf-thanks {
  995.                             margin: 12px 0 0; font-size: 0.85rem; color: #198754; font-weight: 600;
  996.                         }
  997.                     </style>
  998.                 {% endif %}
  1000.                 {% if products is not null and products is not empty %}
  1001.                     {% for product in products %}
  1002.                         {% if product.slug is not empty %}
  1004.                             {# ---- Ligne : produit principal (gauche) + accessoires (droite) ---- #}
  1005.                             <div class="result-row">
  1007.                                 <div class="col-produits">
  1008.                                     <h3>NOTRE RECOMMANDATION</h3>
  1009.                                     <article class="card">
  1010.                                         {% if product.images|length > 0 %}
  1011.                                             <img src="{{ asset('assets/uploads/products/mini/' ~ product.images[0].name) }}"
  1012.                                                  class="card-img-top" alt="{{ product.name }}">
  1013.                                         {% endif %}
  1014.                                         <div class="card-body">
  1015.                                             <h2 class="card-title">Référence : {{ product.slug }}</h2>
  1016.                                             <h2 class="card-title"><strong>{{ product.name }}</strong></h2>
  1017.                                             <div class="letters100"
  1018.                                                  style="font-weight:bold; color: grey">{{ product.header|raw }}</div>
  1019.                                             <br>
  1020.                                             <a href="{{ catalogue_urls[app.request.host]|default(catalogue_default_url) }}/produits/{{ product.slug }}" data-reco-slug="{{ product.slug }}"
  1021.                                                class="btn btn-primary" target="_blank">Voir les détails</a>
  1022.                                         </div>
  1023.                                     </article>
  1024.                                 </div>
  1026.                                 {% if accessories is not null and accessories is not empty %}
  1027.                                     <div class="col-accessoires">
  1028.                                         <h3>Accessoire(s) conseillé</h3>
  1029.                                         {% for accessoire in accessories %}
  1030.                                             {% set found = false %}
  1031.                                             {% for paacc in tabProductAccessories %}
  1032.                                                 {% set found = false %}
  1033.                                                 {% if questionAValue == "Chalumeau" %}
  1034.                                                     {% if paacc.colI == product.slug and paacc.colK == accessoire.slug %}
  1035.                                                         {% set found = true %}
  1036.                                                     {% endif %}
  1037.                                                 {% endif %}
  1038.                                                 {% if questionAValue == "Chalumeau" %}
  1039.                                                     {% if paacc.colI == product.slug and paacc.colN == "" and paacc.colP == accessoire.slug %}
  1040.                                                         {% set found = true %}
  1041.                                                     {% endif %}
  1042.                                                 {% endif %}
  1043.                                                 {% if questionAValue != "Chalumeau" %}
  1044.                                                     {% if paacc.colK == product.slug and paacc.colM == accessoire.slug %}
  1045.                                                         {% set found = true %}
  1046.                                                     {% endif %}
  1047.                                                 {% endif %}
  1048.                                             {% endfor %}
  1049.                                             {% if found %}
  1050.                                                 <article class="card">
  1051.                                                     {% if accessoire.images|length > 0 %}
  1052.                                                         <img src="{{ asset('assets/uploads/products/mini/' ~ accessoire.images[0].name) }}"
  1053.                                                              class="card-img-top" alt="{{ accessoire.name }}">
  1054.                                                     {% endif %}
  1055.                                                     <div class="card-body">
  1056.                                                         <h2 class="card-title">Référence : {{ accessoire.slug }}</h2>
  1057.                                                         <h2 class="card-title"><strong>Catégorie : {{ accessoire.title|raw }}</strong></h2>
  1058.                                                         {% if accessoire.subTitle is not null %}
  1059.                                                             <h2 class="card-title"><strong>{{ accessoire.subTitle }}</strong></h2>
  1060.                                                         {% endif %}
  1061.                                                         <a href="{{ catalogue_urls[app.request.host]|default(catalogue_default_url) }}/produits/{{ accessoire.slug }}" data-reco-slug="{{ accessoire.slug }}"
  1062.                                                            class="btn btn-primary" target="_blank">Voir les détails</a>
  1063.                                                     </div>
  1064.                                                 </article>
  1065.                                             {% endif %}
  1066.                                         {% endfor %}
  1067.                                     </div>
  1068.                                 {% endif %}
  1070.                             </div>
  1072.                             {# ---- Lignes : produits similaires (gauche) + accessoires (droite) ---- #}
  1073.                             {% if products2 is not null and products2 is not empty %}
  1074.                                 {% for product2 in products2 %}
  1075.                                     {% if product2.slug is not empty %}
  1076.                                         {% set found = false %}
  1077.                                         {% for pa2 in tabProductsProducts2 %}
  1078.                                             {% if questionAValue == "Chalumeau" %}
  1079.                                                 {% if pa2.colI == product.slug %}
  1080.                                                     {% set found = true %}
  1081.                                                 {% endif %}
  1082.                                             {% endif %}
  1083.                                             {% if questionAValue != "Chalumeau" %}
  1084.                                                 {% if pa2.colK == product.slug %}
  1085.                                                     {% set found = true %}
  1086.                                                 {% endif %}
  1087.                                             {% endif %}
  1088.                                         {% endfor %}
  1089.                                         {% if found %}
  1090.                                             <div class="result-row">
  1092.                                                 <div class="col-produits">
  1093.                                                     <h3>PRODUIT SIMILAIRE</h3>
  1094.                                                     <article class="card">
  1095.                                                         {% if product2.images|length > 0 %}
  1096.                                                             <img src="{{ asset('assets/uploads/products/mini/' ~ product2.images[0].name) }}"
  1097.                                                                  class="card-img-top" alt="{{ product2.name }}">
  1098.                                                         {% endif %}
  1099.                                                         <div class="card-body">
  1100.                                                             <h2 class="card-title">Référence : {{ product2.slug }}</h2>
  1101.                                                             <h2 class="card-title"><strong>{{ product2.name }}</strong></h2>
  1102.                                                             <div class="letters100"
  1103.                                                                  style="font-weight:bold; color: grey">{{ product2.header|raw }}</div>
  1104.                                                             <br>
  1105.                                                             <a href="{{ catalogue_urls[app.request.host]|default(catalogue_default_url) }}/produits/{{ product2.slug }}" data-reco-slug="{{ product2.slug }}"
  1106.                                                                class="btn btn-primary" target="_blank">Voir les détails</a>
  1107.                                                         </div>
  1108.                                                     </article>
  1109.                                                 </div>
  1111.                                                 {% if accessories is not null and accessories is not empty %}
  1112.                                                     <div class="col-accessoires">
  1113.                                                         <h3>Accessoire(s) conseillé</h3>
  1114.                                                         {% for accessoire in accessories %}
  1115.                                                             {% set found = false %}
  1116.                                                             {% for paacc in tabProductAccessories %}
  1117.                                                                 {% if questionAValue == "Chalumeau" %}
  1118.                                                                     {% if paacc.colN == product2.slug and paacc.colP == accessoire.slug %}
  1119.                                                                         {% set found = true %}
  1120.                                                                     {% endif %}
  1121.                                                                 {% endif %}
  1122.                                                                 {% if questionAValue != "Chalumeau" %}
  1123.                                                                     {% if paacc.colL == product2.slug and paacc.colN == accessoire.slug %}
  1124.                                                                         {% set found = true %}
  1125.                                                                     {% endif %}
  1126.                                                                 {% endif %}
  1127.                                                             {% endfor %}
  1128.                                                             {% if found %}
  1129.                                                                 <article class="card">
  1130.                                                                     {% if accessoire.images|length > 0 %}
  1131.                                                                         <img src="{{ asset('assets/uploads/products/mini/' ~ accessoire.images[0].name) }}"
  1132.                                                                              class="card-img-top" alt="{{ accessoire.name }}">
  1133.                                                                     {% endif %}
  1134.                                                                     <div class="card-body">
  1135.                                                                         <h2 class="card-title">Référence : {{ accessoire.slug }}</h2>
  1136.                                                                         <h2 class="card-title"><strong>Catégorie : {{ accessoire.title|raw }}</strong></h2>
  1137.                                                                         {% if accessoire.subTitle is not null %}
  1138.                                                                             <h2 class="card-title"><strong>{{ accessoire.subTitle }}</strong></h2>
  1139.                                                                         {% endif %}
  1140.                                                                         <a href="{{ catalogue_urls[app.request.host]|default(catalogue_default_url) }}/produits/{{ accessoire.slug }}" data-reco-slug="{{ accessoire.slug }}"
  1141.                                                                            class="btn btn-primary" target="_blank">Voir les détails</a>
  1142.                                                                     </div>
  1143.                                                                 </article>
  1144.                                                             {% endif %}
  1145.                                                         {% endfor %}
  1146.                                                     </div>
  1147.                                                 {% endif %}
  1149.                                             </div>
  1150.                                         {% endif %}
  1151.                                     {% endif %}
  1152.                                 {% endfor %}
  1153.                             {% endif %}
  1155.                         {% endif %}
  1156.                     {% endfor %}
  1157.                 {% endif %}
  1159.             </div>
  1161.         </section>
  1162.     </main>
  1163.     <script>
  1164.         // Empêche le navigateur de restaurer un scroll au rechargement
  1165.         if ('scrollRestoration' in history) {
  1166.             history.scrollRestoration = 'manual';
  1167.         }
  1169.         document.addEventListener("DOMContentLoaded", function () {
  1170.             const form = document.getElementById('search_products_form');
  1171.             const selects = Array.from(form.querySelectorAll('.form-select'));
  1173.             // Re-soumission du formulaire à chaque changement de combobox.
  1174.             //
  1175.             // Les listes sont imbriquées : le contenu de chacune dépend des réponses
  1176.             // précédentes. Revenir en arrière et changer une réponse sans rien faire
  1177.             // d'autre reposterait les réponses suivantes, devenues incohérentes —
  1178.             // `MainController::index()` les accepte telles quelles, puisqu'il se
  1179.             // contente de tester `if ($request->get('questionX'))`.
  1180.             //
  1181.             // On remet donc à vide toutes les listes situées après celle qui vient de
  1182.             // changer, avant de poster. Une valeur vide est falsy côté PHP : les étapes
  1183.             // correspondantes sont simplement désactivées, et le questionnaire reprend
  1184.             // à partir du point modifié.
  1185.             selects.forEach((select, index) => {
  1186.                 select.addEventListener('change', function () {
  1187.                     for (let i = index + 1; i < selects.length; i++) {
  1188.                         selects[i].value = '';
  1189.                     }
  1191.                     form.submit();
  1192.                 });
  1193.             });
  1195.             // Au (re)chargement : centrer la page sur le dernier combobox affiché
  1196.             if (selects.length > 0) {
  1197.                 const dernier = selects[selects.length - 1];
  1198.                 dernier.scrollIntoView({ block: 'center' });
  1199.             }
  1200.         });
  1202.         document.addEventListener("DOMContentLoaded", () => {
  1203.             const paragraphs = document.querySelectorAll("div.letters100");
  1205.             paragraphs.forEach((paragraph) => {
  1206.                 const originalContent = paragraph.innerHTML;
  1207.                 const textContent = paragraph.textContent.trim();
  1209.                 if (textContent.length > 100) {
  1210.                     let visibleLength = 0;
  1211.                     let truncatedHTML = "";
  1213.                     function truncateNodes(nodes) {
  1214.                         nodes.forEach((node) => {
  1215.                             if (visibleLength >= 100) return;
  1217.                             if (node.nodeType === Node.TEXT_NODE) {
  1218.                                 const remainingLength = 100 - visibleLength;
  1219.                                 if (node.textContent.length > remainingLength) {
  1220.                                     truncatedHTML += node.textContent.slice(0, remainingLength);
  1221.                                     visibleLength = 100;
  1222.                                 } else {
  1223.                                     truncatedHTML += node.textContent;
  1224.                                     visibleLength += node.textContent.length;
  1225.                                 }
  1226.                             } else if (node.nodeType === Node.ELEMENT_NODE) {
  1227.                                 const outerHTMLStart = `<${node.nodeName.toLowerCase()}${[...node.attributes]
  1228.                                     .map((attr) => ` ${attr.name}="${attr.value}"`)
  1229.                                     .join("")}>`;
  1231.                                 truncatedHTML += outerHTMLStart;
  1233.                                 truncateNodes([...node.childNodes]);
  1235.                                 if (visibleLength < 100 || node.innerHTML.trim() === "") {
  1236.                                     truncatedHTML += `</${node.nodeName.toLowerCase()}>`;
  1237.                                 }
  1238.                             }
  1239.                         });
  1240.                     }
  1242.                     truncateNodes([...paragraph.childNodes]);
  1243.                     truncatedHTML += "[...]";
  1245.                     paragraph.innerHTML = truncatedHTML;
  1246.                 }
  1247.             });
  1248.         });
  1250.         document.addEventListener("DOMContentLoaded", () => {
  1251.             const paragraphs = document.querySelectorAll("div.letters200");
  1253.             paragraphs.forEach((paragraph) => {
  1254.                 const originalContent = paragraph.innerHTML;
  1255.                 const textContent = paragraph.textContent.trim();
  1257.                 if (textContent.length > 200) {
  1258.                     let visibleLength = 0;
  1259.                     let truncatedHTML = "";
  1261.                     function truncateNodes(nodes) {
  1262.                         nodes.forEach((node) => {
  1263.                             if (visibleLength >= 200) return;
  1265.                             if (node.nodeType === Node.TEXT_NODE) {
  1266.                                 const remainingLength = 200 - visibleLength;
  1267.                                 if (node.textContent.length > remainingLength) {
  1268.                                     truncatedHTML += node.textContent.slice(0, remainingLength);
  1269.                                     visibleLength = 200;
  1270.                                 } else {
  1271.                                     truncatedHTML += node.textContent;
  1272.                                     visibleLength += node.textContent.length;
  1273.                                 }
  1274.                             } else if (node.nodeType === Node.ELEMENT_NODE) {
  1275.                                 const outerHTMLStart = `<${node.nodeName.toLowerCase()}${[...node.attributes]
  1276.                                     .map((attr) => ` ${attr.name}="${attr.value}"`)
  1277.                                     .join("")}>`;
  1279.                                 truncatedHTML += outerHTMLStart;
  1281.                                 truncateNodes([...node.childNodes]);
  1283.                                 if (visibleLength < 200 || node.innerHTML.trim() === "") {
  1284.                                     truncatedHTML += `</${node.nodeName.toLowerCase()}>`;
  1285.                                 }
  1286.                             }
  1287.                         });
  1288.                     }
  1290.                     truncateNodes([...paragraph.childNodes]);
  1291.                     truncatedHTML += "[...]";
  1293.                     paragraph.innerHTML = truncatedHTML;
  1294.                 }
  1295.             });
  1296.         });
  1297.     </script>
  1299.     {# ---- Indicateurs SELECT : avis et clics « Voir les détails » ---- #}
  1300.     {% if trackedSearch is defined and trackedSearch is not null and recoBySlug is not empty %}
  1301.         <script>
  1302.             (function () {
  1303.                 // Correspondance slug produit -> identifiant de recommandation
  1304.                 var recoBySlug = {{ recoBySlug|json_encode|raw }};
  1306.                 // Avis sur la pertinence
  1307.                 var box = document.getElementById('select-feedback');
  1308.                 if (box) {
  1309.                     var searchId = box.dataset.searchId;
  1310.                     var thanks = box.querySelector('.sf-thanks');
  1312.                     box.querySelectorAll('.sf-btn').forEach(function (btn) {
  1313.                         btn.addEventListener('click', function () {
  1314.                             var value = parseInt(btn.dataset.value, 10);
  1316.                             fetch('{{ path('select_feedback', {id: 'PLACEHOLDER'}) }}'.replace('PLACEHOLDER', searchId), {
  1317.                                 method: 'POST',
  1318.                                 headers: {'Content-Type': 'application/json'},
  1319.                                 body: JSON.stringify({feedback: value})
  1320.                             }).then(function (r) {
  1321.                                 return r.ok ? r.json() : Promise.reject(r);
  1322.                             }).then(function () {
  1323.                                 box.querySelectorAll('.sf-btn').forEach(function (b) { b.disabled = true; });
  1324.                                 btn.classList.add('sf-chosen');
  1325.                                 if (thanks) { thanks.hidden = false; }
  1326.                             }).catch(function () {
  1327.                                 if (thanks) {
  1328.                                     thanks.textContent = 'Votre retour n\'a pas pu être enregistré.';
  1329.                                     thanks.style.color = '#dc3545';
  1330.                                     thanks.hidden = false;
  1331.                                 }
  1332.                             });
  1333.                         });
  1334.                     });
  1335.                 }
  1337.                 // Clics « Voir les détails » : sendBeacon pour ne pas retarder la navigation
  1338.                 document.querySelectorAll('a[data-reco-slug]').forEach(function (link) {
  1339.                     link.addEventListener('click', function () {
  1340.                         var id = recoBySlug[link.dataset.recoSlug];
  1341.                         if (!id || !navigator.sendBeacon) { return; }
  1342.                         navigator.sendBeacon(
  1343.                             '{{ path('select_detail_click', {id: 'PLACEHOLDER'}) }}'.replace('PLACEHOLDER', id)
  1344.                         );
  1345.                     });
  1346.                 });
  1347.             })();
  1348.         </script>
  1349.     {% endif %}
  1350. {% endblock %}