templates/Parent/headerParent.html.twig line 1

Open in your IDE?
  1. {#/*
  3. * Role:Header
  4. *
  5. */#}
  7. {%set codeSejParent = app.session.get('Sejour') %}
  8.     {% set pageMenu = app.session.get('pageMenu') %}
  9. <!-- header-start -->
  10. <!-- Navbar-->
  11.  <style>
  12.     /* Animation pour l'icône du panier */
  13. @keyframes bounce {
  14.     0%, 100% {
  15.         transform: translateY(0);
  16.     }
  17.     30% {
  18.         transform: translateY(-10px);
  19.     }
  20.     50% {
  21.         transform: translateY(5px);
  22.     }
  23.     70% {
  24.         transform: translateY(-5px);
  25.     }
  26. }
  28. .cart-bounce {
  29.     animation: bounce 0.6s ease-out;
  30. }
  31.         .popover-header {
  32.             display: flex;
  33.             justify-content: space-between;
  34.             align-items: center;
  35.         }
  36.         .close {
  37.             margin: -0.5rem -0.5rem -0.5rem auto;
  38.         }
  39.         .custom-button {
  40.             background-color: #f09e7a;
  41.             color: #fff; /* Text color always white */
  42.             font-family: 'Montserrat-SemiBold', sans-serif;
  43.             border-radius: 22px;
  44.             font-size: 11px;
  45.             box-shadow: none !important;
  46.             border: none !important;
  47.             margin-top: 8px;
  48.             margin-left: 75px;
  49.             transition: background-color 0.3s ease; /* Smooth transition for background color */
  50.         }
  51.         .custom-button:hover,
  52.         .custom-button:focus,
  53.         .custom-button:active {
  54.             background-color: #41a2aa; /* Background color on hover, focus, and active */
  55.             color: #fff; /* Text color on hover, focus, and active */
  56.         }
  58.         .custom-button:visited {
  59.             color: #fff; /* Text color for visited link */
  60.         }
  61.         .disabled-section {
  62.             pointer-events: none;   /* Disable all interactions */
  63.             opacity: 0.6;           /* Reduce opacity */
  64.         }
  66.         .disabled-element {
  67.             pointer-events: none;
  68.             color: #999;           /* Gray text */
  69.             opacity: 0.6;
  70.         }
  71.       /* Hide the mobile logo by default */
  72.       .mobile-only {
  73.     display: none !important;
  74. }
  76. /* Show the desktop logo by default */
  77. .desktop-only {
  78.     display: block !important;
  79. }
  81. /* Media query for mobile view */
  82. @media (max-width: 767px) {
  83.     /* Show the mobile logo */
  84.     .mobile-only {
  85.         display: block !important;
  86.     }
  88.     /* Hide the desktop logo */
  89.     .desktop-only {
  90.         display: none !important;
  91.     }
  92. }
  94. @media only screen and (max-width: 768px) {
  95.   .help-icon {
  96.     display: none;
  97.   }
  98. }
  99. .vocal-trigger-btn {
  100.       background-color: #3CA9AB;
  101.       color: white;
  102.       border: none;
  103.       padding: 10px 20px;
  104.       border-radius: 4px;
  105.       font-weight: bold;
  106.       cursor: pointer;
  107.       display: flex;
  108.       align-items: center;
  109.       gap: 8px;
  110.     }
  111.     
  112.     .vocal-modal-overlay {
  113.       position: fixed;
  114.       top: 0;
  115.       left: 0;
  116.       width: 100%;
  117.       height: 100%;
  118.       background-color: rgba(0, 0, 0, 0.5);
  119.       display: none;
  120.       justify-content: center;
  121.       align-items: center;
  122.       z-index: 1000;
  123.     }
  124.     
  125.     .vocal-modal {
  126.       font-family: Arial, sans-serif;
  127.       width: 420px;
  128.       max-width: 90%;
  129.       background-color: white;
  130.       border-radius: 8px;
  131.       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  132.       overflow: hidden;
  133.       position: relative;
  134.       z-index: 1001;
  135.     }
  136.     
  137.     .vocal-modal-content {
  138.       padding: 15px;
  139.     }
  140.     
  141.     .vocal-feature {
  142.       display: flex;
  143.       margin-bottom: 12px;
  144.       align-items: flex-start;
  145.     }
  146.     
  147.     .vocal-feature-icon {
  148.       margin-right: 10px;
  149.       flex-shrink: 0;
  150.       width: 20px;
  151.       height: 20px;
  152.       display: flex;
  153.       align-items: center;
  154.       justify-content: center;
  155.     }
  156.     
  157.     .vocal-feature-text {
  158.       flex: 1;
  159.     }
  160.     
  161.     .vocal-feature-title {
  162.       font-weight: bold;
  163.       margin-bottom: 2px;
  164.       font-size: 14px;
  165.     }
  166.     
  167.     .vocal-feature-desc {
  168.       color: #555;
  169.       font-size: 12px;
  170.       line-height: 1.3;
  171.       margin: 0 0 2px 0;
  172.     }
  173.     
  174.     .vocal-modal-buttons {
  175.       display: flex;
  176.       justify-content: flex-end;
  177.       padding: 10px 15px;
  178.       background-color: #f5f5f5;
  179.       border-top: 1px solid #e0e0e0;
  180.     }
  181.     
  182.     .vocal-btn {
  183.       padding: 8px 16px;
  184.       border-radius: 4px;
  185.       font-weight: bold;
  186.       cursor: pointer;
  187.       border: none;
  188.       font-size: 13px;
  189.     }
  190.     
  191.     .vocal-btn-cancel {
  192.       background-color: #f1f1f1;
  193.       color: #666;
  194.       margin-right: 10px;
  195.     }
  196.     
  197.     .vocal-btn-confirm {
  198.       background-color: #E9553B;
  199.       color: white;
  200.     }
  201.     
  202.     /* Animation */
  203.     .vocal-fade-in {
  204.       animation: vocalFadeIn 0.3s ease-in-out;
  205.     }
  206.     
  207.     @keyframes vocalFadeIn {
  208.       from { opacity: 0; }
  209.       to { opacity: 1; }
  210.     }
  211.     @media (max-width: 991px) {
  212.   /* Mobile adjustments */
  213.   .mobile-only {
  214.     display: flex !important;
  215.     margin-right: 8px;
  216.   }
  217.   
  218.   .VMobileBrend {
  219.     margin-top: 0 !important;
  220.     margin-right: 10px;
  221.   }
  222.   
  223.   .mobile-help-btn {
  224.     margin-left: 5px;
  225.     margin-right: 10px;
  226.   }
  227.   
  228.   .mobile-nav-menu {
  229.     margin-left: auto;
  230.     margin-right: auto;
  231.   }
  232.   
  233.   .mobile-nav-item {
  234.     text-align: center;
  235.     padding: 0 10px;
  236.   }
  237.   
  238.   .mobile-nav-item a {
  239.     display: flex;
  240.     flex-direction: column;
  241.     align-items: center;
  242.     font-size: 0.8rem;
  243.   }
  244.   
  245.   .mobile-nav-item i {
  246.     font-size: 1.5rem;
  247.     margin-bottom: 3px;
  248.   }
  249.   
  250.   /* Custom dropdown for mobile menu */
  251.   .mobile-menu-custom-dropdown {
  252.     position: absolute;
  253.     right: 0;
  254.     left: auto;
  255.     top: 100%;
  256.     width: 280px;
  257.     background: white;
  258.     border-radius: 8px;
  259.     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  260.     z-index: 1000;
  261.     padding: 10px 0;
  262.     display: none;
  263.     list-style: none;
  264.     margin: 0;
  265.     transform: translateX(0); /* Remove the negative transform to position on right */
  266.   }
  267.   
  268.   /* Container for the navbar items in the dropdown */
  269.   .mobile-menu-navbar-item {
  270.     display: inline-block;
  271.     margin: 0 5px;
  272.   }
  273.   
  274.   /* Preserve original navbar item styling in the dropdown */
  275.   .mobile-menu-navbar-item .gaucheitems {
  276.     position: relative;
  277.     display: inline-block;
  278.   }
  279.   
  280.   /* Container spacing */
  281.   .container-fluid {
  282.     padding-left: 8px;
  283.     padding-right: 8px;
  284.   }
  285. }
  286.     </style>
  287.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@8.3.1/dist/css/shepherd.css">   
  288.     <nav class="navbar navbar-expand-lg parents_Nav sticky-top" id="sticky-header">
  289.       <div class="container-fluid justify-content-between">
  290.         <!-- Left elements -->
  291.         <div class="d-flex align-items-center">
  292.           <!-- Brand -->
  293.           <a class="navbar-brand me-2 mb-1 d-flex align-items-center desktop-only" onclick='location.href = "{{ path('AccueilParent') }}";'>
  294.             <img class="logo5sur5Header"
  295.                  src="{{ asset('Accueil/imagesAccueil/logoHeader.svg') }}" 
  296.                  alt="5sur5sejour"
  297.                  loading="lazy"
  298.             />
  299.           </a>
  300.         
  301.           <!-- Mobile logo repositioned more to the right -->
  302.           <a class="navbar-brand VMobileBrend mobile-only" onclick='location.href = "{{ path('AccueilParent') }}";'>
  303.             <img class="logo5sur5HeaderMobile"
  304.                  src="{{ asset('Accueil/imagesAccueil/Picto5sur5.svg') }}" 
  305.                  alt="5sur5sejour"
  306.                  loading="lazy"
  307.                  style="height:47px; margin-left:10px; margin-top:-10px"
  308.             />
  309.           </a>
  310.           
  311.           <!-- Help button positioned to the right of logo in mobile -->
  312.           <a class="navbar-brand me-2 mb-1 d-none d-lg-flex align-items-center" style="cursor: pointer;margin-left: 9%;margin-top: 9%;" onclick="loadAndStartTourBasedOnRoute()">
  313.             <i class="bi bi-question-circle" style="color:#41a2aa;font-size:1.5rem"></i>
  314.           </a>
  315.         </div>
  316.         <!-- Left elements -->
  317.      
  318.         <!-- Center elements -->
  319.         <ul class="navbar-nav flex-row d-none d-lg-flex">
  320.           <li class="list-inline-item btn_mainMenuparent me-3 me-lg-1 Nav-lism">
  321.             <a {% if app.session.get("Sejour")!="" %}href="{{path('AccueilParent')}}"{% else %} href="{{path('SejourParent')}}" {% endif %}>
  322.               <img class="NewImgHeader" src="/Accueil/imagesAccueil/sejour.png">
  323.               <h3 class="textBtnManuLeft txtBtnSnSej">Séjour  {{ sejour.codeSejour }}</h3>
  324.             </a>
  325.           </li>
  326.           
  327.           <li class="list-inline-item btn_mainMenuparent me-3 me-lg-1 infosSejourHeader" style="display:none">
  328.             <a style="margin-top: 9px;" {% if app.session.get("Sejour")!="" %}href="{{path('SejourParent')}}"{% else %} href="{{path('SejourParent')}}" {% endif %}>
  329.               <h3 class="txtBtnSnSej" style="top: 11%; color: #41a2aa !important;"> Séjour : </h3>
  330.               <h5 class="datesejourHeader" style=""> du {{ sejour.dateDebutSejour|date("d/m/Y") }} au {{ sejour.dateFinSejour|date("d/m/Y") }} </h5>
  331.             </a>
  332.           </li>
  333.           
  334.           <li class="list-inline-item btn_mainMenuparent no-padding me-3 me-lg-1" onclick='location.href = "{{ path('boutique5sur5') }}"'>
  335.             <a href = "{{ path('boutique5sur5') }}">     
  336.               <img class="NewImgHeader" src="/Accueil/imagesAccueil/boutique.png">
  337.               <h3 class="textBtnManuLeft txtBtnSnSej"> Nos produits </h3>
  338.             </a>
  339.           </li> 
  340.           
  341.           {% if albumAcc !=null %} 
  342.           <li class="list-inline-item btn_mainMenuparent no-padding d-none d-lg-flex albumsejour">
  343.             <a style="margin-top: -10px;" href = '{{ path('Album_du_Sejour') }}' title="Vous pouvez désormais commander votre album séjour">
  344.               <i class="bi bi-book-half" id="selecNav" style="font-size:27px;color:#F09E7A"></i>
  345.               <h3 class="textBtnManuLeft txtBtnSnSej"> Album du séjour </h3>
  346.               <label class="nbrVocal blink"><i class="bi bi-basket" style="color:white"></i></label>
  347.             </a> 
  348.           </li> 
  349.           {% endif %}
  350.           
  351.           <li class="list-inline-item btn_mainMenuparent no-padding Nav-lism" onclick='location.href = "{{ path('Besoindaide_5sur5') }}"'>
  352.             <a>     
  353.               <img class="NewImgHeader" style="width: 30px;" src="/Accueil/imagesAccueil/iconcasque.png">
  354.               <h3 class="textBtnManuLeft txtBtnSnSej">Besoin d'aide </h3>
  355.             </a>
  356.           </li> 
  357.           
  358.           {% if sejour.codeSejour|slice(0, 2) == "EF" and payment == 1 %}
  359.     <input hidden value="{{nbLikes}}">
  360.     <div>
  361.         <li class="list-inline-item btn_mainMenuparent no-padding d-none d-lg-flex albumsejour" id="packOffertSection">
  362.             <a  id="offrePack" href="{{ path('PackPhotosNumerique_Offert', {'nbr': 15}) }}">
  363.                 <i class="bi bi-images" id="selecNav" style="font-size:27px;color:#41a2aa"></i>
  364.                 <h3 class="textBtnManuLeft txtBtnSnSej">Pack offert</h3>
  365.                 <label class="nbrVocal blink"><i class="bi bi-gift" style="color:white;"></i></label>
  366.             </a>
  367.         </li>
  368.     </div>
  369. {% endif %}
  370.         </ul>
  371.         <!-- Center elements -->
  372.     
  373.         <!-- Mobile Navigation Items -->
  374.         <ul class="navbar-nav flex-row d-flex d-lg-none mobile-nav-menu">
  375.           <!-- Nos produits - Always visible in mobile -->
  376.           <li class="list-inline-item btn_mainMenuparent no-padding me-3 me-lg-1" onclick='location.href = "{{ path('boutique5sur5') }}"'>
  377.             <a href = "{{ path('boutique5sur5') }}">     
  378.               <img class="NewImgHeader" src="/Accueil/imagesAccueil/boutique.png">
  379.               <h3 class="textBtnManuLeft txtBtnSnSej"> Nos produits </h3>
  380.             </a>
  381.           </li> 
  382.         </ul>
  383.     
  384.         <!-- Right elements -->
  385.         <ul class="navbar-nav flex-row align-items-center">
  386.           <!-- Service client (hidden) -->
  387.           <li style="display:none" class="list-inline-item menuGaucheHeaderli helpdesk" title="Service client">
  388.             <a style="cursor:pointer" class="gaucheitems" onclick='location.href = "{{path('ServiceClient_Parent')}}";'>
  389.               <i class="bi bi-headset"></i>
  390.             </a>
  391.           </li>
  392.        
  393.           {% if app.user %}{% if app.session.get('Sejour') %}
  394.           <!-- Help button (desktop only) -->
  395.        
  396.           
  397.      
  398.           
  399.           <!-- Vocal Messages (desktop only) -->
  400.           <li class="list-inline-item menuGaucheHeaderli d-none d-lg-block" title="Messages vocaux" style="margin-right:40px">
  401.             {% if code_sejour|slice(0, 2) == 'PF' %}
  402.               <a style="cursor:pointer" class="gaucheitems">
  403.                 <img src="/images/300ppi/ICvocal.png" style="width:30px">
  404.                 <label class="nbrpanier" style="background-color: #f54240" id="">{{nbvocal}}</label>
  405.               </a>
  406.             {% elseif code_sejour|slice(0, 2) == 'PP' and payment == 1 %}
  407.               <a style="cursor:pointer" class="gaucheitems">
  408.                 <img src="/images/300ppi/ICvocal.png" style="width:30px">
  409.                 <label class="nbrpanier" style="background-color: #f54240" id="">{{nbvocal}}</label>
  410.               </a>
  411.             {% elseif code_sejour|slice(0, 2) == 'EF' and payment == 1 %}
  412.               <a  style="cursor:pointer" class="gaucheitems">
  413.                 <img src="/images/300ppi/ICvocal.png" style="width:30px">
  414.                 <label class="nbrpanier" style="background-color: #f54240" id="">{{nbvocal}}</label>
  415.               </a>
  416.             {% elseif code_sejour|slice(0, 2) == 'PP' and payment == 0 %}
  417.               <span style="cursor:not-allowed;opacity:0.5" class="gaucheitems">
  418.                 <img src="/images/300ppi/ICvocal.png" style="width:30px;filter:grayscale(100%)">
  419.                 <label class="nbrpanier" style="background-color: #808080" id="">{{nbvocal}}</label>
  420.               </span>
  421.             {% elseif code_sejour|slice(0, 2) == 'EF' and payment == 0 %}
  422.               <a id="openVocalModalBtn" style="cursor:pointer;opacity:0.5" class="gaucheitems">
  423.                 <img src="/images/300ppi/ICvocal.png" style="width:30px;filter:grayscale(100%)">
  424.                 <label class="nbrpanier" style="background-color: #808080" id="">{{nbvocal}}</label>
  425.               </a>
  426.             {% endif %}
  427.           </li>
  428.     
  429.           <!-- Cart (desktop only) -->
  430.           <li class="list-inline-item menuGaucheHeaderli d-none d-lg-block" title="Mon panier" style="margin-right:40px">
  431.             <a style="cursor:pointer" class="gaucheitems" onclick='location.href = "{{path('MonPanier')}}";'>
  432.               <i class="bi bi-cart-fill cart-link" style="font-size: 1.6rem;line-height: 1.1;color:black;"></i>             
  433.               <label class="nbrpanier" style="background-color: #f54240" id="cart-count">{{Products|length}}</label> 
  434.             </a>
  435.           </li>
  436.           
  437.           <!-- Mobile dropdown for cart and messages -->
  438.           <li class="list-inline-item d-lg-none" title="Menu" onclick="toggleMobileMenu(this);">
  439.             <a style="cursor:pointer" class="gaucheitems">
  440.               <i class="bi bi-three-dots" style="font-size: 1.8rem; margin-top:-5px"></i>
  441.             </a>
  442.             <ul class="mobile-menu-custom-dropdown">
  443.               <!-- This contains the original desktop navbar items -->
  444.               <li class="d-flex align-items-center justify-content-around p-2">
  445.                 <!-- Cart original element -->
  446.                 <div class="mobile-menu-navbar-item">
  447.                   <a style="cursor:pointer" class="gaucheitems" onclick='location.href = "{{path('MonPanier')}}";'>
  448.                     <i class="bi bi-cart-fill cart-link" style="font-size: 1.6rem;line-height: 1.1;color:black;"></i>             
  449.                     <label class="nbrpanier" style="background-color: #f54240" id="cart-count">{{Products|length}}</label> 
  450.                   </a>
  451.                 </div>
  452.                 
  453.                 <!-- Vocal Messages original element with all conditions preserved -->
  454.                 <div class="mobile-menu-navbar-item">
  455.                   {% if code_sejour|slice(0, 2) == 'PF' %}
  456.                     <a  style="cursor:pointer" class="gaucheitems">
  457.                       <img src="/images/300ppi/ICvocal.png" style="width:30px">
  458.                       <label class="nbrpanier" style="background-color: #f54240" id="">{{nbvocal}}</label>
  459.                     </a>
  460.                   {% elseif code_sejour|slice(0, 2) == 'PP' and payment == 1 %}
  461.                     <a  style="cursor:pointer" class="gaucheitems">
  462.                       <img src="/images/300ppi/ICvocal.png" style="width:30px">
  463.                       <label class="nbrpanier" style="background-color: #f54240" id="">{{nbvocal}}</label>
  464.                     </a>
  465.                   {% elseif code_sejour|slice(0, 2) == 'EF' and payment == 1 %}
  466.                     <a  style="cursor:pointer" class="gaucheitems">
  467.                       <img src="/images/300ppi/ICvocal.png" style="width:30px">
  468.                       <label class="nbrpanier" style="background-color: #f54240" id="">{{nbvocal}}</label>
  469.                     </a>
  470.                   {% elseif code_sejour|slice(0, 2) == 'PP' and payment == 0 %}
  471.                     <span style="cursor:not-allowed;opacity:0.5" class="gaucheitems">
  472.                       <img src="/images/300ppi/ICvocal.png" style="width:30px;filter:grayscale(100%)">
  473.                       <label class="nbrpanier" style="background-color: #808080" id="">{{nbvocal}}</label>
  474.                     </span>
  475.                   {% elseif code_sejour|slice(0, 2) == 'EF' and payment == 0 %}
  476.                     <a id="openVocalModalBtn" style="cursor:pointer;opacity:0.5" class="gaucheitems">
  477.                       <img src="/images/300ppi/ICvocal.png" style="width:30px;filter:grayscale(100%)">
  478.                       <label class="nbrpanier" style="background-color: #808080" id="">{{nbvocal}}</label>
  479.                     </a>
  480.                   {% endif %}
  481.                 </div>
  482.         
  483.             
  484.               </li>
  485.             </ul>
  486.           </li>
  487.                                                     
  488.           <!-- Profile dropdown (both mobile and desktop) -->
  489.           <li class="list-inline-item menuGaucheHeaderli" title="" onclick="displayDD($(this));">
  490.             <a style="cursor:pointer" class="gaucheitems">  
  491.               <i class="bi bi-person-fill" style="color:black; margin-bottom: 10px;line-height: 0.8px;font-size: 1.8rem;"></i>
  492.             </a>
  493.             <ul class="submenu DD_nosPrd2">
  494.               <li class="ligne_compte" style="cursor:pointer">
  495.                 <a class="link_compte" onclick='location.href = "{{path('ParametresParent')}}";'>
  496.                   <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-person-fill-gear" viewBox="0 0 16 16">
  497.                     <path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-9 8c0 1 1 1 1 1h5.256A4.493 4.493 0 0 1 8 12.5a4.49 4.49 0 0 1 1.544-3.393C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4m9.886-3.54c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382l.045-.148ZM14 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"></path>
  498.                   </svg>
  499.                   Mon compte
  500.                 </a>
  501.               </li>
  502.               {% if app.session.get('Sejour') %}
  503.               <li class="ligne_compte" style="cursor:pointer">
  504.                 <a class="link_compte" onclick='location.href = "{{path('projet-Parent')}}";'>
  505.                   <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-bag-heart" viewBox="0 0 16 16">
  506.                     <path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0M14 14V5H2v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1M8 7.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132"></path>
  507.                   </svg>
  508.                   Mes créations
  509.                 </a>
  510.               </li>
  511.               {% endif %}
  512.               <li class='ligne_compte' style="cursor:pointer">
  513.                 <a class="link_compte" onclick='location.href = "{{path('SuiviCommandeparent')}}";'>
  514.                   <i class="bi bi-bag-check-fill" style="font-size:1.3rem;margin-right:3px"></i>
  515.                   Mes Commandes
  516.                 </a>
  517.               </li>
  518.               <li class="ligne_compte" style="cursor:pointer">
  519.                 <a class="link_compte" onclick='location.href = "{{path('SejourParent')}}";'>
  520.                   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-suitcase-lg" viewBox="0 0 16 16">
  521.                     <path d="M5 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2h3.5A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5H14a.5.5 0 0 1-1 0H3a.5.5 0 0 1-1 0h-.5A1.5 1.5 0 0 1 0 12.5v-9A1.5 1.5 0 0 1 1.5 2zm1 0h4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1M1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5H3V3zM15 12.5v-9a.5.5 0 0 0-.5-.5H13v10h1.5a.5.5 0 0 0 .5-.5m-3 .5V3H4v10z"></path>
  522.                   </svg>
  523.                   Mes séjours
  524.                 </a>
  525.               </li>
  526.               <li class="ligne_compte" style="cursor:pointer">
  527.                 <a class="link_compte" onclick='location.href = "{{path('Besoindaide_Parent')}}";'>
  528.                   <i class="bi bi-question-circle" style="font-size:1.3rem;margin-right:3px"></i>
  529.                   FAQ
  530.                 </a>
  531.               </li>
  532.               <li class="ligne_compte" style="cursor:pointer">
  533.                 <a class="link_compte" href="/Parent/logout" style="font-weight:700;">
  534.                   <i class="bi bi-power" style="margin-right: 3px;font-size: 1.5rem;color:red"></i>
  535.                   Me déconnecter
  536.                 </a>
  537.               </li>
  538.             </ul>
  539.           </li>
  540.           
  541.           <!-- Partner logo -->
  542.           {%if sejour.idPartenaire.logourl != null and sejour.idPartenaire.logourl != "" and sejour.idPartenaire.logourl is not empty%}
  543.           <li>
  544.             <img class="logopartenaire" alt="Logo partenaire" src="{{sejour.idPartenaire.logourl}}">
  545.           </li>
  546.           {%endif%}
  547.           {% endif %} {% endif %}
  548.         </ul>
  549.         <!-- Right elements -->
  550.       </div>
  551.     </nav>
  554.   <div class="vocal-modal-overlay" id="vocalModalOverlay">
  555.     <div class="vocal-modal">
  556.       <div class="vocal-modal-content">
  557.         <h2 style="color: #3CA9AB; font-size: 18px; margin-top: 0; margin-bottom: 12px;">Accès à la boîte vocale</h2>
  558.         
  559.         <!-- Image placeholder -->
  560.         <div style="text-align: center; margin: 12px 0;">
  561.           <img src="/images/callpopover.png" alt="Illustration messages vocaux" style="max-width: 50%; border-radius: 6px;"/>
  562.         </div>
  563.         
  564.         
  565.         <div class="vocal-feature">
  566.           <div class="vocal-feature-icon">
  567.             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#333">
  568.               <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 12h2c0-4.97-4.03-9-9-9v2c3.87 0 7 3.13 7 7zm-4 0h2c0-2.76-2.24-5-5-5v2c1.66 0 3 1.34 3 3z"/>
  569.             </svg>
  570.           </div>
  571.           <div class="vocal-feature-text">
  572.             <div class="vocal-feature-title">Recevez un appel à chaque nouveau message</div>
  573.             <p class="vocal-feature-desc">À chaque enregistrement, vous recevez un appel avec le message vocal.</p>
  574.             <p class="vocal-feature-desc" style="color: #E9553B; font-weight: bold;">Coût : 2,90 € par message.</p>
  575.           </div>
  576.         </div>
  577.         
  578.         <div class="vocal-feature">
  579.           <div class="vocal-feature-icon">
  580.             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#1D75BB">
  581.               <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
  582.             </svg>
  583.           </div>
  584.           <div class="vocal-feature-text">
  585.             <div class="vocal-feature-title">Accédez aux messages vocaux en illimité sur le web</div>
  586.             <p class="vocal-feature-desc">Consultez tous les messages directement sur la plateforme, sans restriction.</p>
  587.             <p class="vocal-feature-desc" style="color: #3CA9AB; font-weight: bold;">Inclus sans frais supplémentaires.</p>
  588.           </div>
  589.         </div>
  590.         
  591.         <div class="vocal-feature">
  592.           <div class="vocal-feature-icon">
  593.             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#4CAF50">
  594.               <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
  595.             </svg>
  596.           </div>
  597.           <div class="vocal-feature-text">
  598.             <div class="vocal-feature-title">Vous bénéficiez des deux options automatiquement.</div>
  599.             <p class="vocal-feature-desc">Cliquez sur <strong>"Confirmer"</strong> pour activer votre accès.</p>
  600.           </div>
  601.         </div>
  602.       </div>
  603.       
  604.       <div class="vocal-modal-buttons">
  605.         <button class="vocal-btn vocal-btn-cancel" id="vocalCancelBtn">Annuler</button>
  606.         <button class="vocal-btn vocal-btn-confirm" id="vocalConfirmBtn">Confirmer</button>
  607.       </div>
  608.     </div>
  609.   </div>
  610.  <script src="{{'/Plugins/js/jquery-3.4.1.js'}}"></script>
  611.    <script src="{{'/Plugins/js/popper.js'}}"></script>
  612.    <script src="{{'/Plugins/js/bootstrap.min.js'}}"></script>
  613.    <script src="{{ asset('js/shepherd-tours.js') }}"></script>
  614.    <script>
  615.     
  616.     const openVocalModalBtn = document.getElementById('openVocalModalBtn');
  617.     const vocalModalOverlay = document.getElementById('vocalModalOverlay');
  618.     const vocalCancelBtn = document.getElementById('vocalCancelBtn');
  619.     const vocalConfirmBtn = document.getElementById('vocalConfirmBtn');
  620.     
  621.     // Function to open modal
  622.     function openVocalModal() {
  623.       vocalModalOverlay.style.display = 'flex';
  624.       vocalModalOverlay.classList.add('vocal-fade-in');
  625.     }
  626.     
  627.     // Function to close modal
  628.     function closeVocalModal() {
  629.       vocalModalOverlay.style.display = 'none';
  630.     }
  631.     
  632.     // Event listeners
  633.     openVocalModalBtn.addEventListener('click', openVocalModal);
  634.     vocalCancelBtn.addEventListener('click', closeVocalModal);
  635.     vocalConfirmBtn.addEventListener('click', () => {
  636.       // Redirect to messages page
  637.       window.location.href = '/Parent/achatBoiteVocale';
  638.     });
  639.     
  640.     // Close when clicking outside the modal
  641.     vocalModalOverlay.addEventListener('click', (event) => {
  642.       if (event.target === vocalModalOverlay) {
  643.         closeVocalModal();
  644.       }
  645.     });
  646.     function toggleMobileMenu(element) {
  647.   // Close any other open dropdowns first
  648.   const allDropdowns = document.querySelectorAll('.mobile-menu-custom-dropdown');
  649.   allDropdowns.forEach(dropdown => {
  650.     if (dropdown !== element.querySelector('.mobile-menu-custom-dropdown')) {
  651.       dropdown.style.display = 'none';
  652.     }
  653.   });
  654.   
  655.   // Toggle the clicked dropdown
  656.   const dropdown = element.querySelector('.mobile-menu-custom-dropdown');
  657.   if (dropdown.style.display === 'block') {
  658.     dropdown.style.display = 'none';
  659.   } else {
  660.     dropdown.style.display = 'block';
  661.   }
  662.   
  663.   // Stop propagation for links inside the dropdown
  664.   const dropdownLinks = dropdown.querySelectorAll('a, span');
  665.   dropdownLinks.forEach(link => {
  666.     link.addEventListener('click', function(e) {
  667.       e.stopPropagation();
  668.     });
  669.   });
  670.   
  671.   // Specifically handle the modal button click
  672.   const modalBtn = dropdown.querySelector('#openVocalModalBtn');
  673.   if (modalBtn) {
  674.     modalBtn.onclick = function(e) {
  675.       e.stopPropagation();
  676.       // If there's an existing click handler on this button, we should preserve it
  677.       // This is a placeholder for whatever the original modal opening code is
  678.       if (typeof openVocalModal === 'function') {
  679.         openVocalModal();
  680.       }
  681.       // If the modal is opened by a data attribute or other mechanism, we don't need to do anything else
  682.     };
  683.   }
  684.   
  685.   // Close dropdown when clicking outside
  686.   document.addEventListener('click', function closeDropdown(event) {
  687.     if (!element.contains(event.target)) {
  688.       dropdown.style.display = 'none';
  689.       document.removeEventListener('click', closeDropdown);
  690.     }
  691.   });
  692.   
  693.   // Prevent the click from propagating
  694.   event.stopPropagation();
  695. }
  696.     
  697.     function loadAndStartTourBasedOnRoute() {
  698.     // Get the current route/path
  699.     const currentPath = window.location.pathname;
  700.     
  701.     
  702.     // Determine which tour to start based on the route
  703.     let tourFunction = null;
  704.     
  705.     if (currentPath.includes('/Parent/AccueilParent')) {
  706.         tourFunction = 'startSejourTour';
  707.     } else if (currentPath.includes('/Parent/AjoutAlbum')) {
  708.         tourFunction = 'startAlbumTour';
  709.     }
  710.     else if (currentPath.includes('/Parent/LivrePhotos')) {
  711.         tourFunction = 'startAlbumTour';
  712.     }
  713.     else if (currentPath.includes('/Parent/AjoutRetroPhotos_Fav/12')) {
  714.         tourFunction = 'startRetroPhotosTour';
  715.     }
  716.     else if (currentPath.includes('/Parent/AjoutRetroPhotos_Fav/24')) {
  717.         tourFunction = 'startRetroPhotosTour';
  718.     } 
  719.     else if (currentPath.includes('/Parent/AjoutRetroPhotos_Fav/36')) {
  720.         tourFunction = 'startRetroPhotosTour';
  721.     }
  722.     else if (currentPath.includes('/Parent/AjoutPochettePhotos_Fav/12')) {
  723.         tourFunction = 'startTiragePhotosTour';
  724.     } 
  725.     else if (currentPath.includes('/Parent/AjoutPochettePhotos_Fav/24')) {
  726.         tourFunction = 'startTiragePhotosTour';
  727.     } 
  728.     else if (currentPath.includes('/Parent/AjoutPochettePhotos_Fav/36')) {
  729.         tourFunction = 'startTiragePhotosTour';
  730.     }
  731.     else if (currentPath.includes('/Parent/PackPhotosNumerique_Favoris/20')) {
  732.         tourFunction = 'startPackNumeriqueTour';
  733.     } 
  734.     else if (currentPath.includes('/Parent/PackPhotosNumerique_Favoris/30')) {
  735.         tourFunction = 'startPackNumeriqueTour';
  736.     } 
  737.     else if (currentPath.includes('/Parent/PackPhotosNumerique_Favoris/50')) {
  738.         tourFunction = 'startPackNumeriqueTour';
  739.     }   else {
  740.         // Default or handle other routes
  741.         console.log('No tour available for this route');
  742.         return;
  743.     }
  744.     
  745.     // Make sure shepherd-tours.js is loaded
  746.     const loadTourScript = function() {
  747.         var script = document.createElement('script');
  748.         script.src = "/js/shepherd-tours.js";
  749.         script.onload = function() {
  750.             console.log(`Tour script loaded, checking for ${tourFunction}`);
  751.             
  752.             // Check if the tour function is now available
  753.             if (typeof window[tourFunction] === 'function') {
  754.                 console.log(`${tourFunction} function found, starting tour`);
  755.                 
  756.                 // Make sure Shepherd is loaded
  757.                 if (typeof Shepherd === 'undefined') {
  758.                     console.log("Loading Shepherd.js");
  759.                     var shepherdScript = document.createElement('script');
  760.                     shepherdScript.src = "https://cdn.jsdelivr.net/npm/shepherd.js@8.3.1/dist/js/shepherd.min.js";
  761.                     shepherdScript.onload = function() {
  762.                         console.log("Shepherd.js loaded, starting tour");
  763.                         window[tourFunction]();
  764.                     };
  765.                     document.head.appendChild(shepherdScript);
  766.                 } else {
  767.                     console.log("Shepherd.js already loaded, starting tour");
  768.                     window[tourFunction]();
  769.                 }
  770.             } else {
  771.                 console.error(`Tour function ${tourFunction} not found after loading script`);
  772.             }
  773.         };
  774.         script.onerror = function() {
  775.             console.error("Failed to load tour script");
  776.         };
  777.         document.head.appendChild(script);
  778.     };
  779.     
  780.     // Check if the tour function exists already
  781.     if (typeof window[tourFunction] === 'function') {
  782.         console.log(`${tourFunction} already available`);
  783.         
  784.         // Make sure Shepherd is loaded
  785.         if (typeof Shepherd === 'undefined') {
  786.             console.log("Loading Shepherd.js");
  787.             var shepherdScript = document.createElement('script');
  788.             shepherdScript.src = "https://cdn.jsdelivr.net/npm/shepherd.js@8.3.1/dist/js/shepherd.min.js";
  789.             shepherdScript.onload = function() {
  790.                 console.log("Shepherd.js loaded, starting tour");
  791.                 window[tourFunction]();
  792.             };
  793.             document.head.appendChild(shepherdScript);
  794.         } else {
  795.             console.log("Shepherd.js already loaded, starting tour");
  796.             window[tourFunction]();
  797.         }
  798.     } else {
  799.         console.log(`${tourFunction} not found, loading tour script`);
  800.         loadTourScript();
  801.     }
  802. }
  803.     function addToCartAnimation() {
  804.     const cartIcon = document.querySelector('.bi-cart-fill');
  805.     if (cartIcon) {
  806.         cartIcon.classList.add('cart-bounce');
  807.         setTimeout(() => {
  808.             cartIcon.classList.remove('cart-bounce');
  809.         }, 600); // Durée de l'animation (600ms)
  810.     }
  811. }
  812.     </script>
  813.     <script>
  814.         
  815.         $(document).ready(function() {
  816.     // Function to check if Panier contains a product with type 20
  817.     function checkPanier() {
  818.         $.ajax({
  819.             url: '{{ path("disablePack") }}',
  820.             method: 'GET',
  821.             dataType: 'json',
  822.             success: function(response) {
  823.                 
  824.                 if (response.containsProduitType20 || response.idSejour == 0) {
  825.                     
  826.                     // Disable the section by adding a class
  827.                     $('#packOffertSection').addClass('disabled-section');
  828.                     $('#packOffertSection .disabled-element').addClass('disabled-element');
  829.                 } else {
  830.                 
  831.                     // Re-enable the section by removing the disabled classes
  832.                     $('#packOffertSection').removeClass('disabled-section');
  833.                     $('#packOffertSection .disabled-element').removeClass('disabled-element');
  834.                     // Initialize popover if needed
  835.                     initPopover();
  836.                 }
  837.             },
  838.             error: function(xhr, status, error) {
  839.                 console.error('AJAX request failed:', status, error);
  840.             }
  841.         });
  842.     }
  844.     // Function to initialize the popover
  845.     function initPopover() {
  846.         $('#offrePack').popover({
  847.             title: 'Pack numérique inclut <a href="#" class="close" data-dismiss="alert">&times;</a>',
  848.             content: '<div>Profitez d\'un pack numérique inclut dans votre connexion Wahou!</div><a href="{{ path('PackPhotosNumerique_Offert', {'nbr': 15}) }}" class="btn custom-button">J\'en profite</a>',
  849.             html: true,
  850.             placement: 'bottom',
  851.             trigger: 'manual'
  852.         });
  854.         $('#offrePack').on('mouseenter', function() {
  855.             $(this).popover('show');
  856.         });
  858.         $(document).on('modalClosed', function() {
  859.             $('#offrePack').popover('show');
  860.         });
  862.         $(document).on('click', '.popover .close', function() {
  863.             $('#offrePack').popover('hide');
  864.         });
  866.         $(document).on('click', function(e) {
  867.             if (!$(e.target).closest('#offrePack').length && !$(e.target).closest('.popover').length) {
  868.                 $('#offrePack').popover('hide');
  869.             }
  870.         });
  871.     }
  873.     // Call the checkPanier function on document ready
  874.     checkPanier();
  875. });
  877. </script>
  878. <!-- Navbar -->