templates/carteCadeau/tunnel.html.twig line 1

Open in your IDE?
  1. {% extends 'vitrine/base.html.twig' %}
  2. {% import 'vitrine/macros/svg_illustration_macros.twig' as svg %}
  5. {% block title "Carte cadeau" %}
  6. {% block description %}{% trans %}Offrez un moment de détente{% endtrans %}{% endblock %}
  8. {% block stylesheets %}
  9.     {{ parent() }}
  10.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  11.     {{ encore_entry_link_tags('tunnel') }}
  12. {% endblock %}
  14. {% block javascripts %}
  15.     {{ parent() }}
  16.     {{ encore_entry_script_tags('tunnel') }}
  17.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  18.     <script type="text/javascript" src="https://api.payplug.com/js/1/form.latest.js"></script>
  19.     <script src="{{ asset('js/form/postage-price.js') }}"></script>
  20.     <script src="{{ asset('js/form/global.js') }}"></script>
  22.     <script async defer src="https://api.mapbox.com/mapbox-assembly/v1.5.1/assembly.js"></script>
  23.     <script id="search-js" defer="" src="https://api.mapbox.com/search-js/v1.0.0-beta.21/web.js"></script>
  25.     {% if app.environment == "prod" and facebook_pixel_id %}
  26.     <!-- Facebook Pixel Code -->
  27.     <script data-cookieconsent="marketing">
  28.     !function(f,b,e,v,n,t,s)
  29.     {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  30.     n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  31.     if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  32.     n.queue=[];t=b.createElement(e);t.async=!0;
  33.     t.src=v;s=b.getElementsByTagName(e)[0];
  34.     s.parentNode.insertBefore(t,s)}(window, document,'script',
  35.     'https://connect.facebook.net/en_US/fbevents.js');
  37.     fbq('init', '{{ facebook_pixel_id }}');
  38.     fbq('track', 'PageView');
  40.     // Événement ViewContent - Landing page carte cadeau
  41.     fbq('track', 'ViewContent', {
  42.         content_type: 'product',
  43.         content_name: 'Carte Cadeau Taaka',
  44.         content_category: 'gift_card',
  45.         content_ids: ['gift_card'],
  46.         currency: 'EUR'
  47.     });
  49.     // Fonction de tracking pour les étapes du tunnel
  50.     window.trackFacebookEvent = function(eventName, params) {
  51.         if (typeof fbq !== 'undefined') {
  52.             fbq('track', eventName, params);
  53.         }
  54.     };
  55.     </script>
  56.     <noscript>
  57.         <img height="1" width="1" style="display:none"
  58.              src="https://www.facebook.com/tr?id={{ facebook_pixel_id }}&ev=PageView&noscript=1"/>
  59.     </noscript>
  60.     <!-- End Facebook Pixel Code -->
  61.     {% endif %}
  63.     <script>
  64.         const ACCESS_TOKEN = '{{ mapbox_access_token }}';
  65.         const COUNTRIES = '{{ mapbox_countries  }}'.split(',');
  67.         const script = document.getElementById('search-js');
  68.         script.onload = () => {
  69.             // Function to close autofill popups when necessary
  70.             const closeMapboxPopups = () => {
  71.                 const popups = document.querySelectorAll('.mapboxgl-popup');
  72.                 popups.forEach(popup => popup.remove());
  73.             };
  75.             // Helper function to wrap an input field with Mapbox autofill
  76.             const setupAutofillForInput = (inputId) => {
  77.                 const inputElement = document.getElementById(inputId);
  78.                 if (!inputElement) return;
  79.                 
  80.                 // Store the original input's attributes and parent
  81.                 const originalParent = inputElement.parentNode;
  82.                 const style = window.getComputedStyle(inputElement);
  83.                 const width = style.width;
  84.                 
  85.                 // Create a container with the original styles to avoid layout shifts
  86.                 const container = document.createElement('div');
  87.                 container.style.width = width;
  88.                 container.style.position = 'relative';
  89.                 container.style.display = 'inline-block';
  90.                 
  91.                 // Create Mapbox autofill element
  92.                 const autofill = document.createElement('mapbox-address-autofill');
  93.                 autofill.setAttribute('access-token', ACCESS_TOKEN);
  94.                 
  95.                 // Set options as a JSON string attribute
  96.                 autofill.setAttribute('options', JSON.stringify({
  97.                     country: COUNTRIES,
  98.                     language: 'fr'
  99.                 }));
  100.                 
  101.                 // Replace input with the autofill + input
  102.                 originalParent.replaceChild(container, inputElement);
  103.                 container.appendChild(autofill);
  104.                 autofill.appendChild(inputElement);
  105.                 
  106.                 // Add event listeners to handle popups
  107.                 inputElement.addEventListener('blur', () => {
  108.                     setTimeout(closeMapboxPopups, 200);
  109.                 });
  110.             };
  111.             
  112.             // Setup autofill for specific fields - contact address
  113.             setupAutofillForInput('carte_cadeau_contact_adresse');
  114.             
  115.             // Setup autofill for delivery address if it exists
  116.             setupAutofillForInput('carte_cadeau_deliveryAddress_adresse');
  117.             
  118.             // Initialize postage price display for physical card checkbox
  119.             document.addEventListener('DOMContentLoaded', function() {
  120.                 // Only initialize if the physical card price display element exists
  121.                 if (document.querySelector('.is-physical-card')) {
  122.                     // Update price display on page load
  123.                     updatePhysicalCardPriceDisplay('.is-physical-card');
  124.                 }
  125.             });
  126.         };
  127.     </script>
  129.     {% include 'form/components/js-translations.html.twig' %}
  130. {% endblock %}
  132. {% block main %}
  133.     <div id="background-override">
  134.         <video data-step="start" class="background-video" src="https://i.gyazo.com/d9d0bd5636691cfdf72d4db0a4132c09.mp4" muted playsinline autoplay loop></video>
  135.         <div data-step="second-step" class="tunnel-hidden background-image swiper-full">
  136.             <div class="swiper swiper-bath">
  137.                 <div class="swiper-wrapper">
  138.                     <div class="swiper-slide">
  139.                         <img src="https://i.gyazo.com/b7d32e07063d6a51fc24bfe3b70da6ca.jpg" alt="Baignoire 1">
  140.                     </div>
  141.                     <div class="swiper-slide">
  142.                         <img src="https://i.gyazo.com/b7d32e07063d6a51fc24bfe3b70da6ca.jpg" alt="Baignoire 1">
  143.                     </div>
  144.                     <div class="swiper-slide">
  145.                         <img src="https://i.gyazo.com/b7d32e07063d6a51fc24bfe3b70da6ca.jpg" alt="Baignoire 3">
  146.                     </div>
  147.                 </div>
  148.                 <div class="swiper-pagination"></div>
  149.             </div>
  150.         </div>
  151.         <div data-step="fourth-step" class="tunnel-hidden background-image swiper-full">
  152.             <div class="swiper swiper-extra">
  153.                 <div class="swiper-wrapper">
  154.                     <div class="swiper-slide">
  155.                         <img src="https://i.gyazo.com/84c7b90fc6ff6c31478eae19f38bd03d.jpg" alt="Extra 1">
  156.                     </div>
  157.                     <div class="swiper-slide">
  158.                         <img src="https://i.gyazo.com/84c7b90fc6ff6c31478eae19f38bd03d.jpg" alt="Extra 2">
  159.                     </div>
  160.                     <div class="swiper-slide">
  161.                         <img src="https://i.gyazo.com/84c7b90fc6ff6c31478eae19f38bd03d.jpg" alt="Extra 3">
  162.                     </div>
  163.                 </div>
  164.                 <div class="swiper-pagination"></div>
  165.             </div>
  166.         </div>
  167.     </div>
  168.     {% form_theme form 'form/theme_tunnel.html.twig' %}
  169.     {{ form_start(form, { 'attr': { 'class': 'to-submit w-full' }}) }}
  170.     <div class="not-animate-childs pt-32 justify-items-center">
  171.         <div id="progress-bar" class="progress-bar-container tunnel-hidden">
  172.             <p class="progress-bar-steps">
  173.                 {% trans %}Etape{% endtrans %} <span id="step-count">1</span> {% trans %}sur 6{% endtrans %}
  174.             </p>
  175.             <div class="progress-bar">
  176.                 <div class="progress-bar-fill"></div>
  177.             </div>
  178.         </div>
  180.         <section id="start" class="tunnel-hidden content-column-center-48 tunnel-step">
  181.             <h2 class="title text-center mt-24 text-4xl">
  182.                 {% trans %}Offrez un moment de détente à vos proches{% endtrans %}
  183.             </h2>
  184.             <div class="tunnel-footer m-auto">
  185.                 {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Commencer' } %}
  186.             </div>
  187.         </section>
  188.         <section id="first-step" class="tunnel-hidden tunnel-step">
  189.             <div class="content-column-center-48">
  190.                 <div class="content-column-8-center">
  191.                     <h2 class="title text-center">
  192.                         {% trans %}Pour combien de personnes ?{% endtrans %}
  193.                     </h2>
  194.                     <p class="text-opacity-70 text-center">
  195.                         {% trans %}Les heureux élus profiteront de leur espace en toute intimité, quel que soit leur nombre{% endtrans %}
  196.                     </p>
  197.                 </div>
  198.                 <div>
  199.                     {{ form_widget(form.nbParticipants) }}
  200.                 </div>
  201.                 <div class="tunnel-footer">
  202.                     <div class="infoContainer w-full text-center" style="display: none">
  203.                         <p class="stepInfo">
  204.                         </p>
  205.                     </div>
  206.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  207.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'goToPrivatisation', 'label': 'Privatiser' } %}
  208.                 </div>
  209.             </div>
  210.         </section>
  211.         <section id="second-step" class="tunnel-hidden tunnel-step">
  212.             <div class="swiper-button-prev-bath swiper-button-prev"></div>
  213.             <div class="swiper-button-next-bath swiper-button-next"></div>
  214.             <div class="content-column-center-48 ">
  215.                 <div class="content-column-8-center">
  216.                     <h2 class="title text-center">
  217.                         {% trans %}Combien de baignoires voulez-vous inclure ?{% endtrans %}
  218.                     </h2>
  219.                     <p class="text-opacity-70 text-center">
  220.                         {% trans %}Les heureux élus profiteront de leur espace en toute intimité, quel que soit leur nombre.{% endtrans %}
  221.                     </p>
  222.                 </div>
  223. {#                <div class="swiper mySwiper">#}
  224. {#                    <div class="swiper-wrapper">#}
  225. {#                        <div class="swiper-slide"></div>#}
  226. {#                        <div class="swiper-slide"></div>#}
  227. {#                        <div class="swiper-slide"></div>#}
  228. {#                    </div>#}
  229. {#                    <div class="swiper-pagination"></div>#}
  230. {#                </div>#}
  231.                 <div class="max-w-400">
  232.                     {{ form_widget(form.nbBath) }}
  233.                 </div>
  234.                 <div class="tunnel-footer">
  235.                     <div class="totalContainer w-full flex-between" style="display: none">
  236.                         <p class="small-text-opacity-70">
  237.                             {% trans %}Total pour{% endtrans %} <span class="totalPerson">1</span> {% trans %}personne(s){% endtrans %}
  238.                         </p>
  239.                         <p>
  240.                             <b class="totalPrice"></b>
  241.                         </p>
  242.                     </div>
  243.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  244.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'previousStep', 'label': 'Précédent' } %}
  245.                 </div>
  246.             </div>
  247.         </section>
  248.         <section id="third-step" class="tunnel-hidden tunnel-step">
  249.             <div class="content-column-center-48 ">
  250.                 <h2 class="title text-center">
  251.                     {% trans %}Choisissez une offre{% endtrans %}
  252.                 </h2>
  253.                 <div class="w-full">
  254.                     {{ form_widget(form.offer) }}
  255.                 </div>
  256.                 <div class="tunnel-footer">
  257.                     <div class="totalContainer w-full flex-between" style="display: none">
  258.                         <p class="small-text-opacity-70">
  259.                             {% trans %}Total pour{% endtrans %} <span class="totalPerson">1</span> {% trans %}personne(s){% endtrans %}
  260.                         </p>
  261.                         <p>
  262.                             <b class="totalPrice"></b>
  263.                         </p>
  264.                     </div>
  265.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  266.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'previousStep', 'label': 'Précédent' } %}
  267.                 </div>
  268.             </div>
  269.         </section>
  270.         <section id="fourth-step" class="tunnel-hidden tunnel-step">
  271.             <div class="swiper-button-prev-extra swiper-button-prev"></div>
  272.             <div class="swiper-button-next-extra swiper-button-next"></div>
  273.             <div class="content-column-center-48 ">
  274.                 <div class="content-column-8-center">
  275.                     <h2 class="title text-center">
  276.                         {% trans %}Un petit plaisir à ajouter ?{% endtrans %}
  277.                     </h2>
  278.                 </div>
  279.                 <div class="extra-container max-w-400">
  280.                     {{ form_row(form.extraReservations) }}
  281.                 </div>
  282.                 <div class="tunnel-footer">
  283.                     <div class="totalContainer w-full flex-between" style="display: none">
  284.                         <p class="small-text-opacity-70">
  285.                             {% trans %}Total pour{% endtrans %} <span class="totalPerson">1</span> {% trans %}personne(s){% endtrans %}
  286.                         </p>
  287.                         <p>
  288.                             <b class="totalPrice"></b>
  289.                         </p>
  290.                     </div>
  291.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  292.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'previousStep', 'label': 'Précédent' } %}
  293.                 </div>
  294.             </div>
  295.         </section>
  296.         <section id="fifth-step" class="tunnel-hidden tunnel-step">
  297.             <div class="content-column-center-48 ">
  298.                 <div class="content-column-8-center">
  299.                     <h2 class="title text-center">
  300.                         {% trans %}Personnalisez votre carte cadeau{% endtrans %}
  301.                     </h2>
  302.                 </div>
  303. {#                <div class="swiper mySwiper">#}
  304. {#                    <div class="swiper-wrapper">#}
  305. {#                        <div class="swiper-slide"></div>#}
  306. {#                        <div class="swiper-slide"></div>#}
  307. {#                        <div class="swiper-slide"></div>#}
  308. {#                    </div>#}
  309. {#                    <div class="swiper-pagination"></div>#}
  310. {#                </div>#}
  311.                 <div class="max-w-400 content-column-16">
  312.                     <p class="text-opacity-70 text-center">
  313.                         {% trans %}Choisissez votre modèle{% endtrans %}
  314.                     </p>
  315.                     {{ form_widget(form.templateCarteCadeau) }}
  316.                     <p class="text-opacity-70 text-center" style="margin-top: 32px;">
  317.                         {% trans %}Ajoutez un message{% endtrans %}
  318.                     </p>
  319.                     <div class="relative bg-white h-max">
  320.                         {{ form_widget(form.attention) }}
  321.                         <span id="max-length-text">
  322.                             {% trans %}Caractères restants{% endtrans %} : <span id="textarea-remaining-characters">196</span>/196
  323.                         </span>
  324.                     </div>
  325.                 </div>
  327.                 <div class="tunnel-footer">
  328.                     <div class="totalContainer w-full flex-between" style="display: none">
  329.                         <p class="small-text-opacity-70">
  330.                             {% trans %}Total pour{% endtrans %} <span class="totalPerson">1</span> {% trans %}personne(s){% endtrans %}
  331.                         </p>
  332.                         <p>
  333.                             <b class="totalPrice"></b>
  334.                         </p>
  335.                     </div>
  336.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'nextStep', 'label': 'Suivant' } %}
  337.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'previousStep', 'label': 'Précédent' } %}
  338.                 </div>
  339.             </div>
  340.         </section>
  341.         <section id="sixth-step" class="tunnel-hidden tunnel-step">
  342.             <div class="content-column-center-48">
  343.                 <div class="content-column-8 ">
  344.                     <h2 class="title text-center">
  345.                         {% trans %}Récapitulons{% endtrans %}
  346.                     </h2>
  347.                 </div>
  348.                 <div class="content-row-48-center max-w-1200">
  349.                     <div class="gsap-sticky">
  350.                         {% include "tunnel/components/recapitulatif.html.twig" %}
  351.                     </div>
  353.                     <div class="contact-container wrapper-form-right flex-1">
  354.                         <div class="content-column-16">
  356.                             <h2 class="p-16-0">
  357.                                 {% trans %}Votre carte cadeau{% endtrans %}
  358.                             </h2>
  359.                             <div class="content-row-16 is-physical-card">
  360.                                 <div class="input-wrapper">
  361.                                     <label class="content-row-8">
  362.                                         {{ form_widget(form.physicalCard) }}
  363.                                         <div class="checkbox-label">
  364.                                             <p>{% trans %}Impression + envoi postal{% endtrans %}</p>
  365.                                             <p class="small-text-opacity-70 sublabel">{% trans %}Frais de livraison{% endtrans %}</p>
  366.                                         </div>
  367.                                     </label>
  368.                                 </div>
  369.                                 <div id="postagePriceResponse" data-price="0"></div>
  370.                             </div>
  372.                             <p class="green-light-text">{{ 'email.carte_cadeau.physical_delivery_france'|trans }}</p>
  373.                             <p class="green-light-text">{{ 'email.carte_cadeau.physical_delivery_text'|trans }}</p>
  375.                             <div>
  376.                                 <h3 class="p-16-0">
  377.                                     {% trans %}Offert par{% endtrans %}
  378.                                 </h3>
  379.                                 <p class="green-light-text">{% trans %}La carte cadeau sera envoyée sur votre email{% endtrans %}</p>
  380.                             </div>
  381.                             {{ form_row(form.contact) }}
  382.                             
  383.                             <div class="use-facturation-checkbox hidden">
  384.                                 <div class="input-wrapper">
  385.                                     <label class="content-row-8">
  386.                                         {{ form_widget(form.deliveryAddress.useAdresseFacturation) }}
  387.                                         <p>{% trans %}Utiliser cette adresse pour la livraison{% endtrans %}</p>
  388.                                     </label>
  389.                                 </div>
  390.                             </div>
  392.                             <div class="adresse-livraison container-contact-physical-card hidden">
  393.                                 <h3 class="p-16-0">
  394.                                     {% trans %}Adresse de livraison{% endtrans %}
  395.                                 </h3>
  396.                                 <div class="content-column-16 form-contact-physical-card">
  397.                                     <div class="input-wrapper">
  398.                                         <label class="content-column-8">
  399.                                             {% trans %}Prénom{% endtrans %}
  400.                                             {{ form_widget(form.deliveryAddress.prenom) }}
  401.                                         </label>
  402.                                         <hr >
  403.                                         <label class="content-column-8">
  404.                                             {% trans %}Nom{% endtrans %}
  405.                                             {{ form_widget(form.deliveryAddress.nom) }}
  406.                                         </label>
  407.                                     </div>
  408.                                     <div class="input-wrapper">
  409.                                         <label class="content-column-8">
  410.                                             {% trans %}Rue{% endtrans %}
  411.                                             {{ form_widget(form.deliveryAddress.adresse) }}
  412.                                         </label>
  413.                                         <hr >
  414.                                         <label class="content-column-8">
  415.                                             {% trans %}Ville{% endtrans %}
  416.                                             {{ form_widget(form.deliveryAddress.ville) }}
  417.                                         </label>
  418.                                     </div>
  419.                                     <div class="input-wrapper">
  420.                                         <label class="content-column-8">
  421.                                             {% trans %}Code postal{% endtrans %}
  422.                                             {{ form_widget(form.deliveryAddress.codePostal) }}
  423.                                         </label>
  424.                                         <hr >
  425.                                         <label class="content-column-8">
  426.                                             {% trans %}Pays{% endtrans %}
  427.                                             {{ form_widget(form.deliveryAddress.pays) }}
  428.                                         </label>
  429.                                     </div>
  430.                                 </div>
  431.                             </div>
  432.                             {{ form_row(form.cgv) }}
  433.                             <p style="font-size: 14px;">
  434.                                 (*) {% trans %}Champs obligatoires{% endtrans %}
  435.                             </p>
  436.                         </div>
  437.                     </div>
  438.                 </div>
  439.                 <div class="content-column-8 max-w-400">
  440.                     <div class="infoContainer w-full text-center my-2">
  441.                         <p class="stepInfo">
  442.                         </p>
  443.                     </div>
  444.                     {% include 'form/components/rgpd.html.twig' with {'sujet': 'achat'} %}
  445.                     {% include "tunnel/components/primary-button.html.twig" with {'action': 'createPayment', 'label': 'payment.pay'|trans } %}
  446.                     {% include "tunnel/components/secondary-button.html.twig" with {'action': 'goToFirstStep', 'label': 'Modifier' } %}
  447.                 </div>
  448.             </div>
  449.         </section>
  450.     </div>
  451.     {{ form_end(form) }}
  452.     <script src="{{ asset('js/tunnel.js') }}"></script>
  453.     <script src="{{ asset('js/tunnel/swiper.js') }}"></script>
  454.     <script src="{{ asset('js/textarea_length.js') }}"></script>
  455.     <script>
  456.         document.addEventListener('DOMContentLoaded', function() {
  457.             // Fix the selector to find the actual physicalCard checkbox
  458.             const physicalCardCheckbox = document.querySelector('input[name$="[physicalCard]"]');
  459.             const deliveryAddressSections = document.querySelectorAll('.adresse-livraison');
  460.             const useAdresseFacturationContainer = document.querySelector('.use-facturation-checkbox');
  461.             const useAdresseFacturationCheckbox = document.querySelector('.use-facturation-checkbox input');
  462.             const contactCountrySelect = document.querySelector('select[name$="[contact][pays]"]');
  463.             
  464.             // Get all delivery address form fields
  465.             const deliveryAddressFields = document.querySelectorAll(
  466.                 '.adresse-livraison input[required], .adresse-livraison select[required]'
  467.             );
  468.             
  469.             // Function to toggle required attribute on delivery address fields
  470.             function toggleDeliveryFieldsRequired(required) {
  471.                 deliveryAddressFields.forEach(field => {
  472.                     if (required) {
  473.                         field.setAttribute('required', 'required');
  474.                     } else {
  475.                         field.removeAttribute('required');
  476.                     }
  477.                 });
  478.             }
  479.             
  480.             // Check if contact country is France
  481.             function checkContactCountry() {
  482.                 if (contactCountrySelect && useAdresseFacturationCheckbox) {
  483.                     const isContactInFrance = contactCountrySelect.value === 'FR';
  484.                     
  485.                     if (!isContactInFrance) {
  486.                         // Disable checkbox and add warning
  487.                         useAdresseFacturationCheckbox.disabled = true;
  488.                         useAdresseFacturationCheckbox.checked = false;
  489.                         
  490.                         // Add warning if not already present
  491.                         let warningMsg = useAdresseFacturationContainer.querySelector('.country-warning');
  492.                         if (!warningMsg) {
  493.                             warningMsg = document.createElement('p');
  494.                             warningMsg.className = 'country-warning small-text text-error';
  495.                             warningMsg.textContent = "{% trans %}L'adresse de contact doit être en France pour utiliser la même adresse{% endtrans %}";
  496.                             useAdresseFacturationContainer.appendChild(warningMsg);
  497.                         }
  498.                         
  499.                         // Show delivery address if physical card is checked
  500.                         if (physicalCardCheckbox && physicalCardCheckbox.checked) {
  501.                             deliveryAddressSections.forEach(section => {
  502.                                 section.classList.remove('hidden');
  503.                             });
  504.                             toggleDeliveryFieldsRequired(true);
  505.                         }
  506.                     } else {
  507.                         // Enable checkbox and remove warning
  508.                         useAdresseFacturationCheckbox.disabled = false;
  509.                         
  510.                         const warningMsg = useAdresseFacturationContainer.querySelector('.country-warning');
  511.                         if (warningMsg) {
  512.                             warningMsg.remove();
  513.                         }
  514.                         
  515.                         // Update delivery address visibility based on useAdresseFacturation state
  516.                         updateDeliveryAddressVisibility();
  517.                     }
  518.                 }
  519.             }
  520.             
  521.             // Function to update delivery address visibility based on both checkboxes
  522.             function updateDeliveryAddressVisibility() {
  523.                 if (!physicalCardCheckbox) return;
  524.                 
  525.                 const physicalCardChecked = physicalCardCheckbox.checked;
  526.                 const useFacturationChecked = useAdresseFacturationCheckbox && useAdresseFacturationCheckbox.checked && !useAdresseFacturationCheckbox.disabled;
  527.                 
  528.                 // Show/hide use facturation checkbox based on physical card
  529.                 if (useAdresseFacturationContainer) {
  530.                     useAdresseFacturationContainer.classList.toggle('hidden', !physicalCardChecked);
  531.                 }
  532.                 
  533.                 // Show/hide delivery address and set required fields
  534.                 deliveryAddressSections.forEach(section => {
  535.                     if (physicalCardChecked && !useFacturationChecked) {
  536.                         section.classList.remove('hidden');
  537.                         toggleDeliveryFieldsRequired(true);
  538.                     } else {
  539.                         section.classList.add('hidden');
  540.                         toggleDeliveryFieldsRequired(false);
  541.                     }
  542.                 });
  543.             }
  544.             
  545.             // Initialize form state
  546.             if (physicalCardCheckbox) {
  547.                 // Set initial state - by default everything should be hidden and not required
  548.                 toggleDeliveryFieldsRequired(false);
  549.                 updateDeliveryAddressVisibility();
  550.                 
  551.                 // Add event listener for physical card checkbox
  552.                 physicalCardCheckbox.addEventListener('change', function() {
  553.                     updateDeliveryAddressVisibility();
  554.                 });
  555.             }
  556.             
  557.             // Check country on load and when country changes
  558.             if (contactCountrySelect) {
  559.                 checkContactCountry();
  560.                 contactCountrySelect.addEventListener('change', checkContactCountry);
  561.             }
  562.             
  563.             // Handle useAdresseFacturation checkbox if it exists
  564.             if (useAdresseFacturationCheckbox) {
  565.                 useAdresseFacturationCheckbox.addEventListener('change', function() {
  566.                     updateDeliveryAddressVisibility();
  567.                 });
  568.             }
  569.         });
  571.         let submitButton = document.querySelector(".submit-btn");
  573.         window.addEventListener('message', function (event) {
  574.             // Check if the message is coming from the PayPlug origin
  575.             if (event.origin === "https://secure.payplug.com") {
  576.                 // Check if the message data indicates the lightbox was closed
  577.                 if (event.data === "closePayPlugFrame") {
  578.                     // Re-enable the submit button
  579.                     submitButton.removeAttribute("disabled");
  580.                     submitButton.querySelector(".spinner").style.display = "none";
  581.                 }
  582.             }
  583.         });
  585.         function createPayment() {
  586.             let form = document.querySelector("form.to-submit");
  587.             let formExtras = new FormData(form);
  588.             let formData = {};
  590.             submitButton.removeAttribute("disabled");
  591.             displayStepInfo(submitButton, "");
  593.             for (let entry of formExtras.entries()) {
  594.                 formData[entry[0]] = entry[1];
  595.             }
  597.             // get the template select option value
  598.             formData['template'] = document.querySelector('input[name="carte_cadeau[templateCarteCadeau]"]:checked').value;
  600.             // Check for delivery address confirmation if physical card is selected
  601.             if (!confirmDeliveryAddress()) {
  602.                 // User cancelled, reset button state and don't proceed with payment
  603.                 submitButton.disabled = false;
  604.                 submitButton.removeAttribute('disabled');
  606.                 // Remove loading states
  607.                 submitButton.classList.remove('loading', 'disabled', 'processing');
  609.                 // Reset any inline styles
  610.                 submitButton.style.pointerEvents = '';
  611.                 submitButton.style.opacity = '';
  613.                 // Hide spinner if it exists
  614.                 const spinner = submitButton.querySelector('.spinner');
  615.                 if (spinner) {
  616.                     spinner.style.display = 'none';
  617.                 }
  619.                 // Clear any info messages
  620.                 displayStepInfo(submitButton, "");
  622.                 return;
  623.             }
  625.             // Facebook Pixel - InitiateCheckout avec le montant
  626.             // Server-side event is also sent via Meta Conversions API
  627.             if (typeof window.trackFacebookEvent !== 'undefined' && typeof synthesisRefreshPrice === 'function') {
  628.                 const totalPrice = synthesisRefreshPrice();
  629.                 window.trackFacebookEvent('InitiateCheckout', {
  630.                     content_type: 'product',
  631.                     content_name: 'Carte Cadeau Taaka',
  632.                     content_category: 'gift_card',
  633.                     content_ids: ['gift_card'],
  634.                     num_items: 1,
  635.                     currency: 'EUR',
  636.                     value: totalPrice
  637.                 });
  638.             }
  640.             // Custom validation - check only visible required fields
  641.             const visibleRequiredFields = form.querySelectorAll('input[required]:not([style*="display: none"]), select[required]:not([style*="display: none"])');
  642.             let isValid = true;
  643.             let firstInvalidField = null;
  645.             visibleRequiredFields.forEach(field => {
  646.                 // Skip validation for fields that are in hidden containers
  647.                 const isFieldHidden = field.closest('.hidden') !== null;
  648.                 if (!isFieldHidden && !field.value.trim()) {
  649.                     isValid = false;
  650.                     if (!firstInvalidField) {
  651.                         firstInvalidField = field;
  652.                     }
  653.                 }
  654.             });
  656.             if (!isValid) {
  657.                 displayStepInfo(submitButton, "Veuillez remplir tous les champs obligatoires");
  658.                 if (firstInvalidField) {
  659.                     firstInvalidField.focus();
  660.                 }
  661.                 return;
  662.             }
  664.             submitButton.disabled = true;
  665.             submitButton.querySelector(".spinner").style.display = "block";
  667.             $.ajax({
  668.                 url: "{{ path('carte_cadeau_paiement') }}",
  669.                 dataType: "json",
  670.                 type: "Post",
  671.                 async: true,
  672.                 data: formData,
  673.                 success: function (data) {
  674.                     Payplug.showPayment(data);
  675.                 },
  676.                 error: function (data) {
  677.                     alert('{% trans %}Nous sommes désolés, une erreur est survenue, nous avons besoin que vous recommenciez. Aucun paiement n\'a été émis.{% endtrans %}');
  678.                     submitButton.removeAttribute("disabled");
  679.                     submitButton.querySelector(".spinner").style.display = "none";
  680.                     // window.location.reload();
  681.                 }
  682.             });
  683.         }
  684.     </script>
  685. {% endblock %}