templates/Parent/DetailsSejour.html.twig line 1

Open in your IDE?
  1. {% extends "Parent/LayoutParent.html.twig" %} {% block LinksCss %}
  2. {{ parent() }}
  4. <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
  5. <link rel="stylesheet" href="{{ '/css/Parent/css/premiercnx.css' }}" />
  6. <link href="{{ asset('css/Parent/css/detailsejour.css') }}" type="text/css" rel="stylesheet" />
  7. <link rel="stylesheet" href="{{ '/css/Accompagnateur/imgzoom.css' }}" />
  8. <link rel="stylesheet" href="{{ asset('Plugins/css/dropzone.css') }}" />
  9. <link rel="stylesheet" href="{{ asset('css/splide.min.css') }}" />
  10. <link rel="stylesheet" href="{{ asset('css/favorites-sidebar.css') }}" />
  11. {% set destination = "detailsejour" %}
  12. <style>
  15. .btn-cmdFav {
  16.   background-color: #F56040;
  17.   color: white;
  18.   padding: 10px 20px;
  19.   border-radius: 6px;
  20.   font-size: 1rem;
  21.   box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  22.   transition: all 0.3s ease;
  23. }
  24. .btn-cmdFav:hover {
  25.   background-color: #e64a30;
  26.   transform: scale(1.05);
  27.   box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  28. }
  29. .filter-badge {
  30.   background-color: #ccc;
  31.   color: white;
  32.   font-size: 12px;
  33.   padding: 2px 10px;
  34.   border-radius: 20px;
  35.   display: flex;
  36.   align-items: center;
  37.   cursor: pointer;
  38.   transition: all 0.3s ease;
  39. }
  41. .filter-badge:hover {
  42.   background-color: #aaa;
  43. }
  45. /* Quand le filtre est actif */
  46. .filter-badge.active {
  47.   background-color: #3BA39B; /* Vert plus vif */
  48.   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  49.   font-weight: bold;
  50.   color: white;
  51. }
  53.   .close-btn-purchase {
  54.     position: absolute;
  55.     padding: 2px;
  56.     top: 10px;
  57.     right: 10px;
  58.     background: none;
  59.     border: none;
  60.     font-size: 35px;
  61.     cursor: pointer;
  62.   }
  63.   .close-btn-purchase :hover {
  64.     color: red;
  65.   }
  66.   .rowimag.no-margin {
  67.     display: grid;
  68.     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  69.     /* auto-fill + minmax ensures they fill the row and wrap automatically */
  70.     gap: 8px; /* spacing between items, optional */
  71.     margin: 0; /* override default margin if you want */
  72.     padding: 0;
  73.   }
  75.   /* Each cell is 200px tall (or pick your own dimension). */
  76.   .photo-item {
  77.     width: 100%;
  78.     height: 250px; /* fixed height: 200px */
  79.     position: relative;
  80.     overflow: hidden; /* hide any overflow if the image is bigger */
  81.     border-radius: 4px; /* optional rounding corners */
  82.     background: #f0f0f0; /* fallback background color while image loads */
  83.     margin-bottom: 20px;
  84.   }
  86.   /* For images, we want them to fill the box and maintain a cover aspect. */
  87.   .photo-item img,
  88.   .photo-item video {
  89.     width: 100%;
  90.     height: 100%;
  91.     object-fit: cover; /* ensures image or video is cropped rather than distorted */
  92.     display: block;
  93.   }
  94.   .fav-button {
  95.     pointer-events: none; /* Makes the entire button unclickable */
  96.   }
  97.   
  98.   /* Enable hover effects only */
  99.   .fav-button * {
  100.     pointer-events: auto; /* Re-enable events for children */
  101.     pointer-events: hover; /* Only allow hover events, not clicks */
  102.   }
  103.   
  104.   /* Add this class to the purchase alert to ensure it remains interactive */
  105.   #purchase-alert {
  106.     pointer-events: auto;
  107.   
  108.   }
  110.   /* Réduit l'espace autour du header */
  111.   .header {
  112.     padding: 15px 15px 5px 15px;
  113.     background: #f9f9f9;
  114.   }
  116.   /* Réduit l'espace sous le titre et le sous-titre */
  117.   .titreDetailSej {
  118.     margin-bottom: 8px;
  119.   }
  120.   .media-counts {
  121.     margin-bottom: 8px;
  122.   }
  124.   /* Centre la navigation des dates */
  125.   .date-navigation {
  126.     display: flex;
  127.     align-items: center;
  128.     justify-content: center;
  129.     gap: 8px;
  130.     width: 100%;
  131.     margin-top: 0;
  132.   }
  134.   /* Centre le conteneur des cartes */
  135.   .date-container {
  136.     display: flex;
  137.     justify-content: center;
  138.     width: 100%;
  139.   }
  141.   .media-list-horizontal {
  142.     gap: 4px;
  143.     font-size: 11px;
  144.     margin-top: 2px;
  145.     display: flex;
  146.     justify-content: center;
  147.     list-style: none;
  148.     margin-bottom: 0;
  149.     padding-left: 0;
  150.   }
  154.   .sejour-title h1 {
  155.     font-size: 1.5rem;
  156.     font-weight: bold;
  157.     color: #3BA39B;
  158.     display: flex;
  159.     align-items: center;
  160.     gap: 10px;
  161.   }
  163.   .sejour-dates {
  164.     font-size: 14px;
  165.     color: #777;
  166.     margin-top: 5px;
  167.   }
  169.   .sejour-medias {
  170.     display: flex;
  171.     gap: 20px;
  172.     align-items: center;
  173.     font-size: 14px;
  174.     color: #555;
  175.   }
  177.   .media-info {
  178.     display: flex;
  179.     align-items: center;
  180.     gap: 5px;
  181.   }
  183.   /* Responsive Mobile */
  184.   @media (max-width: 768px) {
  185.     .sejour-header {
  186.       flex-direction: column;
  187.       align-items: center;
  188.       text-align: center;
  189.     }
  191.     .sejour-medias {
  192.       margin-top: 10px;
  193.       gap: 10px;
  194.     }
  195.   }
  196. </style>
  197. {% endblock %} {% set pageMenu = app.session.get('pageMenu') %} {% block Content
  198. %}
  200. <!-- Alerte pour inciter à acheter -->
  201. <div id="purchase-alert" class="purchase-alert hidden" style="display: none;">
  202.   <button class="close-btn" onclick="closePurchaseAlert()">&times;</button>
  204.   <div id="purchase-alert-content">
  205.     <!-- Le contenu de l'alerte sera mis à jour dynamiquement en fonction du nombre de favoris -->
  206.   </div>
  207. </div>
  209. <div
  210.   id="verifImg"
  211.   class="modal fade"
  212.   role="dialog"
  213.   style="background-color: rgba(112, 112, 112, 0.56); z-index: 1000000"
  214. >
  215.   <div class="modal-dialog dialogUploadImg">
  216.     <div class="row modal-content no-margin contentdialogNoImg">
  217.       <div class="headerdialogUploadImg">
  218.         <h1 class="titledialogUploadImg"></h1>
  219.         <img
  220.           src="{{ '/images/Accompagnateur/CroixFermeture.svg' }}"
  221.           class="closeNOUploadImg"
  222.           data-dismiss="modal"
  223.         />
  224.       </div>
  225.       <div class="ContenudetailsSejour">
  226.         <div class="row no-margin detailsSejour">
  227.           <div class="ContentUpload">
  228.             <h1 class="titleTelechargement">
  229.               Oulala, patience, avant tout sélectionnez vos photos préférées à
  230.               l'aide de ce bouton
  231.               <i
  232.                 class="bi bi-heart"
  233.                 style="font-size: 1.3rem"
  234.                 title="Ajouter à  ma sélection"
  235.               ></i>
  236.               sous les photos  <br /><br /><a style="color: #f09e7a"
  237.                 >Pensez à commander des tirages... pour leurs offrir un beau
  238.                 souvenir !
  239.               </a>
  240.             </h1>
  241.           </div>
  242.         </div>
  243.       </div>
  244.       <div class="BottomNoUploadImg">
  245.         <button class="BtnUploadImg btnAnnulerUpload" data-dismiss="modal">
  246.           OK
  247.         </button>
  248.       </div>
  249.     </div>
  250.   </div>
  251. </div>
  254. <div class="main-content">
  255.   <div class="row no-margin">
  256.     <!-- Chat button -->
  257.     <div
  258.       class="fav-button"
  259.       onmouseover="showSelection()"
  260.       onmouseout="hideSelection()"
  261.     >
  262.       <i id="favoris-icon-Accueilpayment" class="bi bi-heart-fill CoeurEclat"></i
  263.       ><label
  264.         id="likeCount"
  265.         class="labelFavCount"
  266.         style="background-color: #f56040"
  267.       >
  268.         {{ likes | length }}</label
  269.       >
  270.     </div>
  271.     <div class="selection-popover" id="selectionPopover">
  272.       <h4>Votre sélection</h4>
  273.       <p>Tirages : {{ likes | length }} / 12</p>
  274.       <p>Numériques : {{ likes | length }} / 15</p>
  275.       <p>Album : {{ likes | length }} / 20</p>
  276.       <button class="finalize-button">Finaliser ma commande</button>
  277.     </div>
  278.   </div>
  280.   <div class="divSliderModern">
  281.     <input type="hidden" id="nbFavCurrent" value="{{ nblikes }}" />
  283.     <div
  284.       class="splide no-padding no-margin"
  285.       id="imageSlider"
  286.       style="max-height: 200px"
  287.     >
  288.       <div class="splide__track">
  289.         <ul class="splide__list">
  290.           <!-- Slide 1 -->
  291.           <li class="splide__slide">
  292.             <div class="slider-content" style="background: white">
  293.               <div class="namePRD" style="display: block">
  294.                 <h4
  295.                   class="titleProdbienvenu titleProdbienvenu1"
  296.                   style="color: #41a2aa"
  297.                 >
  298.                   Ajoutez vos favoris dès maintenant
  299.                 </h4>
  300.                 <h4
  301.                   class="titleProdbienvenu titleProdbienvenu2"
  302.                   style="color: #f09e7a"
  303.                 >
  304.                   et profitez de nos produits souvenirs personnalisés !
  305.                 </h4>
  306.               </div>
  308.               <img
  309.                 src="{{ asset('/images/imgSliderEmpty2.png') }}"
  310.                 class="imgslider"
  311.                 alt="Image 1"
  312.               />
  313.             </div>
  314.           </li>
  315.           <!-- Slide 2 -->
  316.           <li class="splide__slide">
  317.             <div class="slider-content" style="background: white">
  318.               <div class="namePRD" style="display: block">
  319.                 <h4
  320.                   class="titleProdbienvenu titleProdbienvenu1"
  321.                   style="color: #f09e7a"
  322.                 >
  323.                   Pensez à commander le livre du séjour
  324.                 </h4>
  325.                 <h4
  326.                   class="titleProdbienvenu titleProdbienvenu2"
  327.                   style="color: #41a2aa"
  328.                 >
  329.                   et offrez lui le plus beau des cadeaux !
  330.                 </h4>
  331.               </div>
  332.               <img
  333.                 src="{{ asset('/images/imgSliderEmpty1.png') }}"
  334.                 class="imgslider"
  335.                 alt="Image 2"
  336.               />
  337.             </div>
  338.           </li>
  339.         </ul>
  340.       </div>
  341.     </div>
  342.   </div>
  343.   <!-- Section de contenu à atteindre après le scroll -->
  344.   <div
  345.     class="no-margin"
  346.     id="scrollTarget"
  347.     style="width: 100%; background: #f9f9f9; padding-top: 30px"
  348.   >
  349.     <div class="no-margin" id="scrollTarget" style="width: 100%">
  350.       <!-- Conteneur principal en ligne -->
  351.       <div
  352.         class="header d-flex align-items-center justify-content-between"
  353.         style="padding: 15px;"
  354.       >
  355.         <!-- Bloc titre -->
  356.         <div class="box divInfosSejour" style="width: 95%;">
  357.           <img
  358.             class="imageTitreSej"
  359.             src="/Accueil/imagesAccueil/sejour.png"
  360.             alt="Icône séjour"
  361.             style="width: 40px; height: auto"
  362.           />
  364.           <h1 class="titreDetailSej">
  365.             Séjour {{sejour.codeSejour}} {{ sejour.themSejour }}
  367.             <span class="spnTitleSej">
  368.               du
  369.               {{ sejour.dateDebutSejour|date("d M Y")|replace({"Jan": "janv.", "Feb": "fév.", "Mar": "mars", "Apr": "avr.", "May": "mai", "Jun": "juin", "Jul": "juil.", "Aug": "août", "Sep": "sept.", "Oct.": "oct.", "Nov.": "nov.", "Dec.": "déc."}) }}
  370.               au
  371.               {{ sejour.dateFinSejour|date("d M Y")|replace({"Jan": "janv.", "Feb": "fév.", "Mar": "mars", "Apr": "avr.", "May": "mai", "Jun": "juin", "Jul": "juil.", "Aug": "août", "Sep": "sept.", "Oct.": "oct.", "Nov.": "nov.", "Dec.": "déc."}) }}
  372.             </span>
  373.           </h1>
  374.           <span class="spnTitleSej" style="color:black">
  375.         
  376.             (📷 {{ attachementsCount }} Photos/Vidéos | 🎵 {{ nbmessages }} Audios  ❤️  <label
  377.         id="mesFavCount" style="color:black;margin-right:5px"
  378.       
  379.     >
  380.     {{ nblikes }}   </label> Favoris )
  381.   
  382.           </span>
  384.           <div class="date-navigation">
  385.           
  386.      
  388.             <div class="date-container">
  389.               {% for x, groupAttach in listeattach %}
  390.                 {% set xDate = date(x) %}
  391.                 {% set finDate = date(sejour.dateFinSejour) %}
  392.                 {% if xDate <= finDate %}
  393.                   <div
  394.                     class="date-card modern-card {% if loop.last and xDate <= finDate %} active {% endif %}"
  395.                     data-aos="fade-up"
  396.                     data-bs-toggle="collapse"
  397.                     data-bs-target="#demP{{ loop.index }}"
  398.                     id="iconedemoP{{ loop.index }}"
  399.                   >
  400.                     <div class="card-content text-center">
  401.                       <span class="day">
  402.                         {% if groupAttach.isFirstDay == "yes" %} Premier jour
  403.                         {% elseif groupAttach.isLastDay == "yes" %} Dernier jour
  404.                         {% else %}
  405.                           {{ xDate|date("D")|replace({
  406.                             "Mon": "lun.",
  407.                             "Tue": "mar.",
  408.                             "Wed": "mer.",
  409.                             "Thu": "jeu.",
  410.                             "Fri": "ven.",
  411.                             "Sat": "sam.",
  412.                             "Sun": "dim."
  413.                           }) }}
  414.                         {% endif %}
  415.                       </span>
  416.                       <span class="full-date">
  417.                         {{ xDate|date("d M Y")|replace({
  418.                           "Jan": "janv.",
  419.                           "Feb": "fév.",
  420.                           "Mar": "mars",
  421.                           "Apr": "avr.",
  422.                           "May": "mai",
  423.                           "Jun": "juin",
  424.                           "Jul": "juil.",
  425.                           "Aug": "août",
  426.                           "Sep": "sept.",
  427.                           "Oct.": "oct.",
  428.                           "Nov.": "nov.",
  429.                           "Dec.": "déc."
  430.                         }) }}
  431.                       </span>
  432.                       <ul class="media-list-horizontal">
  433.                         {% if groupAttach.countPhotos > 0 %}
  434.                         <li>
  435.                           <i class="bi bi-images" style="color: #f56040; font-size: 0.7rem; margin-right: 3px"></i>
  436.                           {{ groupAttach.countPhotos }}
  437.                         </li>
  438.                         {% endif %}
  439.                         {% if groupAttach.countAudio > 0 %}
  440.                         <li>
  441.                           <i class="bi bi-mic-fill" style="color: #ffa500; font-size: 0.7rem; margin-right: 5px"></i>
  442.                           {{ groupAttach.countAudio }}
  443.                         </li>
  444.                         {% endif %}
  445.                         {% if groupAttach.countVideos > 0 %}
  446.                         <li>
  447.                           <i class="bi bi-camera-video-fill" style="color: #41a2aa; font-size: 0.7rem; margin-right: 5px"></i>
  448.                           {{ groupAttach.countVideos }}
  449.                         </li>
  450.                         {% endif %}
  451.                       </ul>
  452.                     </div>
  453.                   </div>
  454.                 {% endif %}
  455.               {% endfor %} <div id="dynamic-card" class="dynamic-card">
  456.       <div id="dynamic-card-content" class="dynamic-card-content">
  457.         <!-- Le contenu dynamique (album, pochette, montage vidéo) sera injecté ici -->
  458.       </div>
  459.     </div>
  460.             </div>
  461.           </div>
  462.         </div>
  463.       </div>
  464.     </div>
  466.     <!-- Descriptions and Attachments -->
  467.     <div class="container--gallery modern">
  468.       {% set lastValidIndex = 0 %}
  469.       {% set hasAttachments = false %}
  470.       {% for x, groupAttach in listeattach %}
  471.       {% set xDate = date(x) %}
  472.       {% set finDate = date(sejour.dateFinSejour) %}
  473.       {% if xDate <= finDate %}
  474.       {% set lastValidIndex = loop.index %}
  475.       {% set hasAttachments = true %}
  476.       <div
  477.         id="demP{{ loop.index }}"
  478.         class="collapse {% if loop.last and xDate <= finDate %}show{% endif %}"
  479.         style="padding: 2%; padding-top: 0%"
  480.       >
  481.         <div class="journal-entry">
  482.         <div class="entry-header" style="
  483.     display: flex;
  484.     align-items: center;
  485.     justify-content: space-between;
  486.     background: #ffffff;
  487.     padding: 8px 15px;
  488.     border-radius: 10px;
  489.     margin-bottom: 20px;
  490.     box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  491.     border-bottom: 1px solid #eee;
  492.     flex-wrap: wrap;
  493. ">
  495.   <!-- Bouton Jour Précédent -->
  496.   {% if not loop.first %}
  497.   <button class="btn-prev-day" data-target="{{ loop.index0 - 1 }}" style="
  498.       background-color: #3BA39B;
  499.       border: none;
  500.       padding: 5px 10px;
  501.       border-radius: 8px;
  502.       font-weight: bold;
  503.       font-size: 14px;
  504.       height: 36px;
  505.       display: flex;
  506.       align-items: center;
  507.       color: white;
  508.       cursor: pointer;
  509.       transition: all 0.3s ease;
  510.   ">
  511.     <i class="bi bi-chevron-left" style="font-size: 18px;"></i>
  512.   </button>
  513.   {% else %}
  514.   <div style="width: 36px;"></div>
  515.   {% endif %}
  517.   <!-- Centre : Date + Médias -->
  518.   <div style="
  519.       flex-grow: 1;
  520.       display: flex;
  521.       align-items: center;
  522.       justify-content: center;
  523.       flex-wrap: wrap;
  524.       gap: 12px;
  525.   ">
  526.     <!-- Date -->
  527.     <div style="font-weight: bold; font-size: 16px; color: #333;">
  528.       {{ x|date("l d F Y")|replace({
  529.           "Monday": "Lundi", "Tuesday": "Mardi", "Wednesday": "Mercredi",
  530.           "Thursday": "Jeudi", "Friday": "Vendredi", "Saturday": "Samedi",
  531.           "Sunday": "Dimanche",
  532.           "January": "Janvier", "February": "Février", "March": "Mars",
  533.           "April": "Avril", "May": "Mai", "June": "Juin",
  534.           "July": "Juillet", "August": "Août", "September": "Septembre",
  535.           "October": "Octobre", "November": "Novembre", "December": "Décembre"
  536.       }) }}
  537.     </div>
  539.   <!-- Filtres Médias -->
  540. <div class="filter-icons" style="display: flex; gap: 8px; flex-wrap: wrap;">
  541.     <span class="filter-badge active" data-filter="all" title="Afficher tout">
  542.         <i class="bi bi-grid-3x3-gap-fill" style="margin-right: 5px; font-size: 14px;"></i> Tout
  543.     </span>
  545.     {% if groupAttach.countPhotos > 0 %}
  546.     <span class="filter-badge" data-filter="photo" title="Filtrer les photos">
  547.         <i class="bi bi-image" style="margin-right: 5px; font-size: 14px;"></i> {{ groupAttach.countPhotos }}
  548.     </span>
  549.     {% endif %}
  551.     {% if groupAttach.countVideos > 0 %}
  552.     <span class="filter-badge" data-filter="video" title="Filtrer les vidéos">
  553.         <i class="bi bi-camera-video-fill" style="margin-right: 5px; font-size: 14px;"></i> {{ groupAttach.countVideos }}
  554.     </span>
  555.     {% endif %}
  557.     {% if groupAttach.countAudio > 0 %}
  558.     <span class="filter-badge" data-filter="audio" title="Filtrer les messages audio">
  559.         <i class="bi bi-mic-fill" style="margin-right: 5px; font-size: 14px;"></i> {{ groupAttach.countAudio }}
  560.     </span>
  561.     {% endif %}
  562. </div>
  564.   </div>
  566.   <!-- Bouton Jour Suivant -->
  567.   {% if not loop.last %}
  568.   <button class="btn-next-day" data-target="{{ loop.index0 + 1 }}" style="
  569.       background-color: #3BA39B;
  570.       border: none;
  571.       padding: 5px 10px;
  572.       border-radius: 8px;
  573.       font-weight: bold;
  574.       font-size: 14px;
  575.       height: 36px;
  576.       display: flex;
  577.       align-items: center;
  578.       color: white;
  579.       cursor: pointer;
  580.       transition: all 0.3s ease;
  581.   ">
  582.     <i class="bi bi-chevron-right" style="font-size: 18px;"></i>
  583.   </button>
  584.   {% else %}
  585.   <div style="width: 36px;"></div>
  586.   {% endif %}
  590.    
  591.    
  592.         </div>
  593.         <!-- Contenu -->
  594.         <div class="entry-content" id="TourContent">
  595.       
  596.           <p class="description" style="margin-left:2%;width:95%;margin-top:1%;margin-bottom:1%;text-align:left">
  597.             {% for description in sejour.jourdescripdate %} {% if
  598.             description.datejourphoto|date("m/d/Y") == x|date("m/d/Y") %}
  599.             {{ description.description | nl2br }}
  600.             {% endif %} {% endfor %}
  601.           </p>
  603.  
  604.           <!-- Conteneur des photos et vidéos -->
  605.           <div
  606.             class="rowimag no-margin"
  607.             style="
  608.               width: 100%;
  609.               display: flex;
  610.               flex-wrap: wrap;
  611.               margin: 0;
  612.               box-sizing: border-box;
  613.             "
  614.           >
  615.             <!-- Afficher les Photos et Vidéos -->
  616.             {% for attach in groupAttach.attachments %}
  617.               {% if attach.libiller == 'photo' %}
  618.            
  619.             <div class="column" data-type="{{ attach.libiller }}">
  620.             
  621.               <div class="photo-zoom photo-item">
  622.          
  623.                 <a href="{{ attach.path }}">
  624.                   <img src="{{ attach.path }}" alt="{{ attach.descreption }}" />
  625.                 </a>
  627.                 <!-- Icône du cœur avec logique existante -->
  628.                 <div
  629.                   class="heart-icon"
  630.                   id="coeur{{ attach.id_attchment }}"
  631.                   data-id="{{ attach.id_attchment }}"
  632.                   data-sejour-id="{{ sejour.id }}"
  633.                   data-path="{{ attach.path }}"
  634.                   data-description="{{ attach.descreption }}"
  635.                 >
  636.                   {% if app.user %} {% if attach.is_favorite %}
  637.                   <i
  638.                     class="bi bi-heart-fill"
  639.                     title="Sélectionnée"
  640.                     style="color: #f56040"
  641.                   ></i>
  642.                   {% else %}
  643.                   <i class="bi bi-heart" title="Ajouter à ma sélection"></i>
  644.                   {% endif %} {% endif %}
  645.                 </div>
  646.                 <div class="photo-actions" style="display: none">
  647.                   <button class="menu-btn">⋮</button>
  648.                   <div class="menu-options">
  649.                     <button onclick="addToPack('tirage')">
  650.                       🖨️ Ajouter au tirage
  651.                     </button>
  652.                     <button onclick="addToPack('numerique')">
  653.                       💾 Ajouter au numérique
  654.                     </button>
  655.                   </div>
  656.                 </div>
  657.               
  658.               </div>
  659.               {% if attach.descreption != "" %}
  660.               <h4 class="description">{{ attach.descreption }}</h4>
  661.               {% endif %}
  662.             </div>
  666.             {% endif %} 
  669.              {% if attach.libiller == 'video' %}
  670.            
  671.             <div class="column" data-type="{{ attach.libiller }}">
  672.                  
  673.             
  674.                  <div class="video-container" style="position: relative; display: inline-block; width: 100%; border-radius: 8px; overflow: hidden;">
  675.                         <video class="photo-zoom" controls controlslist="nodownload noplaybackrate" style="width: 100%;">
  676.                           <source src="{{ attach.path }}" type="video/mp4" />
  677.                           Votre navigateur ne supporte pas la lecture vidéo.
  678.                         </video>
  679.                       
  680.                       </div>
  681.               {% if attach.descreption != "" %}
  682.               <h4 class="description">{{ attach.descreption }}</h4>
  683.               {% endif %}
  684.             </div>
  685.             {% endif %} 
  686.             
  687.             {% endfor %}
  688.           </div>
  690.           <!-- Section séparée pour les messages audio -->
  691.           {% if groupAttach.countAudio > 0 %}
  692.           <div class="audio-messages-section" style="margin-top:15px; border-top: 1px solid #eee; padding: 30px;">
  693.             <h4 style="margin-bottom: 15px; color: #555">
  694.               <i class="bi bi-mic-fill" style="margin-right: 8px; color: #ffa500"></i>
  695.               Messages vocaux ({{ groupAttach.countAudio }})
  696.             </h4>
  697.             
  698.             {% if sejour.codeSejour|slice(0, 2) == 'PF' %}
  699.               {# Les séjours commençant par PF ont toujours accès #}
  700.               <div class="audio-messages-container" style="display: flex; flex-wrap: wrap; gap: 15px">
  701.                 {% for attach in groupAttach.attachments %}
  702.                   {% if attach.libiller == 'message' %}
  703.                     <div class="audio-message-item" style="background: #f9f9f9; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; width: calc(33.33% - 10px); min-width: 250px; flex-grow: 1;">
  704.                       <div class="audio-player-container" style="display: flex; align-items: center; margin-bottom: 10px;">
  705.                         <i class="bi bi-mic-fill" style="font-size: 20px; margin-right: 10px; color: #ffa500"></i>
  706.                         <audio controls controlslist="nodownload noplaybackrate" style="flex: 1">
  707.                           <source src="{{ attach.path }}" type="audio/mp3" />
  708.                           Votre navigateur ne supporte pas la lecture audio.
  709.                         </audio>
  710.                       </div>
  711.                       {% if attach.descreption != "" %}
  712.                         <div class="audio-description" style="padding-left: 30px">
  713.                           <p style="margin: 0; font-size: 14px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;">
  714.                             {{ attach.descreption }}
  715.                           </p>
  716.                         </div>
  717.                       {% endif %}
  718.                     </div>
  719.                   {% endif %}
  720.                 {% endfor %}
  721.               </div>
  722.             
  723.             {% elseif sejour.codeSejour|slice(0, 2) == 'PP' and parentsejour.payment  == 1 or sejour.codeSejour|slice(0, 2) == 'EF' and parentsejour.payment  == 1 %}
  724.               {# PP ou EF avec paiement effectué #}
  725.               <div class="audio-messages-container" style="display: flex; flex-wrap: wrap; gap: 15px">
  726.                 {% for attach in groupAttach.attachments %}
  727.                   {% if attach.libiller == 'message' %}
  728.                     <div class="audio-message-item" style="background: #f9f9f9; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; width: calc(33.33% - 10px); min-width: 250px; flex-grow: 1;">
  729.                       <div class="audio-player-container" style="display: flex; align-items: center; margin-bottom: 10px;">
  730.                         <i class="bi bi-mic-fill" style="font-size: 20px; margin-right: 10px; color: #ffa500"></i>
  731.                         <audio controls controlslist="nodownload noplaybackrate" style="flex: 1">
  732.                           <source src="{{ attach.path }}" type="audio/mp3" />
  733.                           Votre navigateur ne supporte pas la lecture audio.
  734.                         </audio>
  735.                       </div>
  736.                       {% if attach.descreption != "" %}
  737.                         <div class="audio-description" style="padding-left: 30px">
  738.                           <p style="margin: 0; font-size: 14px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;">
  739.                             {{ attach.descreption }}
  740.                           </p>
  741.                         </div>
  742.                       {% endif %}
  743.                     </div>
  744.                   {% endif %}
  745.                 {% endfor %}
  746.               </div>
  747.             
  748.             {% elseif sejour.codeSejour|slice(0, 2) == 'PP' and parentsejour.payment == 0 or sejour.codeSejour|slice(0, 2) == 'EF' and parentsejour.payment == 0 %}
  749.               {# PP ou EF sans paiement - message d'accès limité et audio désactivés #}
  750.               <div class="audio-messages-container" style="display: flex; flex-wrap: wrap; gap: 15px; opacity: 0.5; pointer-events: none; filter: grayscale(100%);">
  751.                 <div class="audio-messages-restricted" style="padding: 20px; background: #f0f0f0; border-radius: 8px; text-align: center; margin-bottom: 15px; width: 100%;">
  752.                   <i class="bi bi-lock-fill" style="font-size: 24px; color: #808080; margin-bottom: 10px;"></i>
  753.                   <p style="margin: 0; color: #555;">Pour accéder aux messages vocaux, veuillez effectuer le paiement de votre séjour.</p>
  754.                 </div>
  755.                 {% for attach in groupAttach.attachments %}
  756.                   {% if attach.libiller == 'message' %}
  757.                     <div class="audio-message-item" style="background: #f9f9f9; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; width: calc(33.33% - 10px); min-width: 250px; flex-grow: 1;">
  758.                       <div class="audio-player-container" style="display: flex; align-items: center; margin-bottom: 10px;">
  759.                         <i class="bi bi-mic-fill" style="font-size: 20px; margin-right: 10px; color: #ffa500"></i>
  760.                         <audio controls controlslist="nodownload noplaybackrate" style="flex: 1" disabled>
  761.                           <source src="{{ attach.path }}" type="audio/mp3" />
  762.                           Votre navigateur ne supporte pas la lecture audio.
  763.                         </audio>
  764.                       </div>
  765.                       {% if attach.descreption != "" %}
  766.                         <div class="audio-description" style="padding-left: 30px">
  767.                           <p style="margin: 0; font-size: 14px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;">
  768.                             {{ attach.descreption }}
  769.                           </p>
  770.                         </div>
  771.                       {% endif %}
  772.                     </div>
  773.                   {% endif %}
  774.                 {% endfor %}
  775.               </div>
  776.             {% endif %}
  777.           </div>
  778.         {% endif %}
  779.         </div>
  780.       </div>
  781.     </div>
  782.     {% endif %}
  783.     {% endfor %}
  784.     {% if not hasAttachments %}
  785.     <div class="welcome-message" style="padding: 50px 20px; text-align: center; background: #f9f9f9; border-radius: 15px; margin: 30px auto; max-width: 800px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);">
  786.       <img src="/images/welcome-icon.svg" alt="Bienvenue" style="width: 80px; margin-bottom: 20px;" onerror="this.src='/images/Accompagnateur/Picto5sur5.svg'; this.style.width='120px';">
  787.       
  788.       <h2 style="color: #41a2aa; margin-bottom: 20px; font-size: 24px;">Bienvenue sur votre espace séjour !</h2>
  789.       
  790.       <p style="font-size: 18px; color: #555; margin-bottom: 15px;">
  791.         Aucun contenu n'a encore été partagé pour ce séjour.
  792.       </p>
  793.       
  794.       <p style="font-size: 16px; color: #666; margin-bottom: 25px;">
  795.         L'accompagnateur partagera bientôt des photos, vidéos et messages vocaux.
  796.         <br>Revenez consulter cette page régulièrement pour suivre les aventures du séjour !
  797.       </p>
  798.       
  799.       <div style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">
  800.         <div style="display: flex; align-items: center; background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
  801.           <i class="bi bi-images" style="font-size: 24px; color: #f56040; margin-right: 10px;"></i>
  802.           <span>Photos du séjour</span>
  803.         </div>
  804.         
  805.         <div style="display: flex; align-items: center; background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
  806.           <i class="bi bi-camera-video-fill" style="font-size: 24px; color: #41a2aa; margin-right: 10px;"></i>
  807.           <span>Vidéos des activités</span>
  808.         </div>
  809.         
  810.         <div style="display: flex; align-items: center; background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
  811.           <i class="bi bi-mic-fill" style="font-size: 24px; color: #ffa500; margin-right: 10px;"></i>
  812.           <span>Messages vocaux</span>
  813.         </div>
  814.       </div>
  815.     </div>
  816.     
  817.     <!-- Espace supplémentaire pour déplacer le footer vers le bas -->
  818.     <div style="height: 300px;"></div>
  819.     {% endif %}
  820.     
  821.     <!-- Make sure we're showing the right content by default if no valid content is marked 'show' -->
  822.     {% if lastValidIndex > 0 %}
  823.     <script>
  824.       document.addEventListener('DOMContentLoaded', function() {
  825.         // Check if no content is showing
  826.         if (document.querySelectorAll('.container--gallery .collapse.show').length === 0) {
  827.           // Show the content for the last valid date
  828.           var lastValidContent = document.getElementById('demP{{ lastValidIndex }}');
  829.           if (lastValidContent) {
  830.             lastValidContent.classList.add('show');
  831.             
  832.             // Also mark the corresponding date card as active
  833.             var dateCards = document.querySelectorAll('.date-card');
  834.             if (dateCards.length >= {{ lastValidIndex }}) {
  835.               dateCards.forEach(card => card.classList.remove('active'));
  836.               dateCards[{{ lastValidIndex - 1 }}].classList.add('active');
  837.             }
  838.           }
  839.         }
  840.       });
  841.     </script>
  842.     {% endif %}
  843.   </div>
  844. </div>
  846.   {% endblock %} {% block Javascript %}
  847.   {{ parent() }}
  848.   <script>// Gestion de la sidebar des favoris
  849. document.addEventListener('DOMContentLoaded', function() {
  850.     const sidebar = document.getElementById('favorites-sidebar');
  851.     const openBtn = document.getElementById('openFavoritesSidebar');
  852.     const closeBtn = document.querySelector('.favorites-close');
  853.     const favButton = document.querySelector('.fav-button');
  855.     function openSidebar() {
  856.         sidebar.classList.add('active');
  857.         updateFavoritesSidebar();
  858.     }
  860.     function closeSidebar() {
  861.         sidebar.classList.remove('active');
  862.     }
  864.     function updateFavoritesSidebar() {
  865.         const grid = document.getElementById('favorites-grid');
  866.         const counter = document.getElementById('favorites-counter');
  867.         const emptyState = document.getElementById('favorites-empty-state');
  868.         const progress = document.getElementById('favorites-progress');
  869.         
  870.         const count = parseInt(document.getElementById('likeCount').textContent);
  871.         counter.textContent = count +1;
  872.         
  873.         if (count === 0) {
  874.             emptyState.style.display = 'flex';
  875.             grid.style.display = 'none';
  876.         } else {
  877.             emptyState.style.display = 'none';
  878.             grid.style.display = 'grid';
  879.             const percentage = (count / 20) * 100;
  880.             progress.style.width = `${percentage}%`;
  881.         }
  882.     }
  884.     if (openBtn) {
  885.         openBtn.addEventListener('click', openSidebar);
  886.     }
  888.     if (favButton) {
  889.         favButton.addEventListener('click', openSidebar);
  890.     }
  892.     if (closeBtn) {
  893.         closeBtn.addEventListener('click', closeSidebar);
  894.     }
  896.     document.addEventListener('click', (e) => {
  897.         if (sidebar.classList.contains('active') && 
  898.             !sidebar.contains(e.target) && 
  899.             !favButton.contains(e.target) && 
  900.             !openBtn.contains(e.target)) {
  901.             closeSidebar();
  902.         }
  903.     });
  904. });
  905. // Modification des fonctions existantes
  906. const originalAddFavoris = window.AddFavoris;
  907. window.AddFavoris = function($id, $idSejour, $urlimg, $description) {
  908.     if (originalAddFavoris) {
  909.         originalAddFavoris($id, $idSejour, $urlimg, $description);
  910.     }
  911.     
  912.     // Vérifier si la sidebar est ouverte - noter que nous vérifions la valeur CSS right: 0
  913.     if ($("#favorites-sidebar").css("right") === "0px") {
  914.         // Recharger les favoris
  915.         loadFavorites();
  916.     }
  917. };
  919. const originalSupprimerFavoris = window.supprimerFavoris;
  920. window.supprimerFavoris = function($id, $idSejour) {
  921.     if (originalSupprimerFavoris) {
  922.         originalSupprimerFavoris($id, $idSejour);
  923.     }
  924.     
  925.     // Vérifier si la sidebar est ouverte
  926.     if ($("#favorites-sidebar").css("right") === "0px") {
  927.         // Recharger les favoris
  928.         loadFavorites();
  929.     }
  930. };
  932. // Variables globales
  933. let selectedFavorites = [];
  934. let allFavorites = [];
  936. // Fonction pour mettre à jour la sidebar
  937. function loadFavorites() {
  938.     $("#favorites-grid").html("<div style='text-align:center;padding:20px;'>Chargement...</div>");
  939.     
  940.     $.ajax({
  941.         url: "/Parent/mes-favoris",
  942.         type: "GET",
  943.         dataType: "json",
  944.         success: function(data) {
  945.             $("#favorites-grid").empty();
  946.             allFavorites = data.data || [];
  947.             
  948.             if (allFavorites.length > 0) {
  949.                 $("#favorites-empty-state").hide();
  950.                 
  951.                 $.each(allFavorites, function(i, fav) {
  952.                     var isSelected = selectedFavorites.includes(fav.id);
  953.                     
  954.                     var item = $("<div class='favorite-item' style='position:relative;border-radius:8px;overflow:hidden;aspect-ratio:1;cursor:pointer;'></div>");
  955.                     var img = $("<img style='width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease;'>").attr("src", fav.path).attr("alt", fav.descreption || "Photo favorite");
  956.                     
  957.                     // Overlay de sélection
  958.                     var selectionOverlay = $("<div class='selection-overlay' style='position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;'></div>");
  959.                     
  960.                     // Icône de sélection
  961.                     var checkIcon = $("<div style='width:25px;height:25px;border-radius:50%;border:2px solid white;display:flex;align-items:center;justify-content:center;background:" + (isSelected ? "#F56040" : "transparent") + ";transition:background 0.2s;'></div>");
  962.                     if (isSelected) {
  963.                         checkIcon.append("<i class='bi bi-check' style='color:white;font-size:16px;'></i>");
  964.                     }
  965.                     
  966.                     selectionOverlay.append(checkIcon);
  967.                     
  968.                     // Overlay d'action (bouton supprimer)
  969.                     var actionOverlay = $("<div class='action-overlay' style='position:absolute;top:5px;right:5px;opacity:0;transition:opacity 0.2s;'></div>");
  970.                   
  971.                     actionOverlay.append(deleteBtn);
  972.                     
  973.                     // Ajouter les événements
  974.                     item.hover(
  975.                         function() { $(this).find(".action-overlay").css("opacity", "1"); },
  976.                         function() { $(this).find(".action-overlay").css("opacity", "0"); }
  977.                     );
  978.                     
  979.                     item.click(function() {
  980.                         toggleSelection(fav.id, $(this).find(".selection-overlay > div"));
  981.                     });
  982.                     
  983.                     item.append(img).append(selectionOverlay).append(actionOverlay);
  984.                     $("#favorites-grid").append(item);
  985.                 });
  986.                 
  987.                 $("#favorites-counter").text(allFavorites.length);
  988.                 
  989.                 // Mettre à jour le compteur sur le bouton également
  990.                 $("#openFavoritesSidebar span").text(allFavorites.length);
  991.                 
  992.                 // Mettre à jour l'interface produits
  993.                 updateProductsView();
  994.                 
  995.             } else {
  996.                 $("#favorites-empty-state").show();
  997.                 $("#favorites-counter").text("0");
  998.                 $("#openFavoritesSidebar span").text("0");
  999.                 $("#selection-count").text("0");
  1000.                 updateProductsView();
  1001.             }
  1002.         },
  1003.         error: function() {
  1004.             $("#favorites-grid").html("<div style='color:red;text-align:center;padding:20px;'>Erreur de chargement</div>");
  1005.         }
  1006.     });
  1007. }
  1009. // Fonction pour supprimer un favori
  1010. function removeFavorite(id) {
  1011.     $.ajax({
  1012.         url: "/Parent/remove-favorite/" + id,
  1013.         type: "POST",
  1014.         success: function() {
  1015.             // Retirer de la sélection si présent
  1016.             selectedFavorites = selectedFavorites.filter(favId => favId != id);
  1017.             
  1018.             // Mettre à jour le compteur de sélection
  1019.             $("#selection-count").text(selectedFavorites.length);
  1020.             
  1021.             // Recharger les favoris
  1022.             loadFavorites();
  1023.             
  1024.             // Mettre à jour les compteurs globaux
  1025.             var count = parseInt($("#likeCount").text());
  1026.             if (!isNaN(count)) {
  1027.                 $("#likeCount").text(count - 1);
  1028.             }
  1029.             
  1030.             var countFav = parseInt($("#mesFavCount").text());
  1031.             if (!isNaN(countFav)) {
  1032.                 $("#mesFavCount").text(countFav - 1);
  1033.             }
  1034.             
  1035.             // Mettre à jour l'interface produits
  1036.             updateProductsView();
  1037.         },
  1038.         error: function() {
  1039.             alert("Erreur lors de la suppression du favori");
  1040.         }
  1041.     });
  1042. }
  1044. // Fonction pour basculer la sélection d'une photo
  1045. function toggleSelection(id, checkElement) {
  1046.     const index = selectedFavorites.indexOf(id);
  1047.     
  1048.     if (index === -1) {
  1049.         // Ajouter à la sélection
  1050.         selectedFavorites.push(id);
  1051.         checkElement.css("background", "#F56040");
  1052.         checkElement.html("<i class='bi bi-check' style='color:white;font-size:16px;'></i>");
  1053.     } else {
  1054.         // Retirer de la sélection
  1055.         selectedFavorites.splice(index, 1);
  1056.         checkElement.css("background", "transparent");
  1057.         checkElement.html("");
  1058.     }
  1059.     
  1060.     // Mettre à jour le compteur
  1061.     $("#selection-count").text(selectedFavorites.length);
  1062.     
  1063.     // Mettre à jour l'interface produits
  1064.     updateProductsView();
  1065. }
  1067. // Fonction pour mettre à jour la vue des produits
  1068. function updateProductsView() {
  1069.     const current = selectedFavorites.length;
  1070.     $("#product-photo-count").text(current);
  1071.     
  1072.     let remainingForAlbum = Math.max(0, 20 - current);
  1073.     let remainingForPochette = Math.max(0, 12 - current);
  1074.     let remainingForPack = Math.max(0, 12 - current);
  1076.     const progressBar = (count, total, color) => `
  1077.         <div style="margin: 5px 0;">
  1078.             <div style="background-color: #e9ecef; border-radius: 5px; overflow: hidden; height: 8px;">
  1079.                 <div style="width: ${(count / total) * 100}%; background-color: ${color}; height: 100%;"></div>
  1080.             </div>
  1081.             <small style="font-size: 12px;">${count}/${total} photos</small>
  1082.         </div>
  1083.     `;
  1085.     // Liste des produits
  1086.     const products = [
  1087.         {
  1088.             name: "Pack numérique (20 photos)",
  1089.             required: 20,
  1090.             remaining: Math.max(0, 20 - current),
  1091.             image: "/images/produit/photoNumerique.jpg",
  1092.             color: "#4caf50",
  1093.             link: "{{ path('PackPhotosNumerique_Favoris', {'nbr':20}) }}",
  1094.         },
  1095.        +
  1096.         {
  1097.             name: "Pochette photo (12 photos)",
  1098.             required: 12,
  1099.             remaining: Math.max(0, 12 - current),
  1100.             image: "/images/produit/PochettePhoto5sur5-2.jpg",
  1101.             color: "#2196f3",
  1102.             link: "{{ path('AjoutPochettePhotos_Favoris', {'nbr': 12}) }}",
  1103.         },
  1104.     ].sort((a, b) => a.remaining - b.remaining);
  1106.     const productList = products
  1107.         .map((product) => {
  1108.             const count = current;
  1109.             const total = product.required;
  1110.             const remaining = product.remaining;
  1112.             return `
  1113.                 <li style="margin-bottom: 20px;">
  1114.                     <div style="display: flex; align-items: center; gap: 10px;">
  1115.                         <img src="${product.image}" alt="${product.name}" style="width: 70px; height: 70px; border-radius: 5px; object-fit: cover;" />
  1116.                         <div style="flex: 1;">
  1117.                             <strong style="font-size: 14px;">${product.name}</strong>
  1118.                             ${progressBar(count, total, product.color)}
  1119.                             ${
  1120.                                 `<small style="color: ${product.color}; font-size: 12px;">
  1121.                                     Encore ${remaining} photos pour compléter ${product.name.toLowerCase()}
  1122.                                 </small>
  1123.                                 <button
  1124.                                     style="
  1125.                                         margin-top: 5px;
  1126.                                         padding: 6px 12px;
  1127.                                         background-color: ${product.color};
  1128.                                         color: white;
  1129.                                         border: none;
  1130.                                         border-radius: 5px;
  1131.                                         font-size: 13px;
  1132.                                         cursor: pointer;
  1133.                                     "
  1134.                                     onclick="window.location.href='${product.link}'"
  1135.                                 >
  1136.                                     Commander
  1137.                                 </button>`
  1138.                             }
  1139.                         </div>
  1140.                     </div>
  1141.                 </li>
  1142.             `;
  1143.         })
  1144.         .join("");
  1146.     const boutiqueButton = `
  1147.         <li style="margin-top: 25px; text-align: center;">
  1148.             <button
  1149.                 style="
  1150.                     padding: 8px 15px;
  1151.                     background-color: #F56040;
  1152.                     color: white;
  1153.                     border: none;
  1154.                     border-radius: 5px;
  1155.                     font-size: 14px;
  1156.                     width: 170px;
  1157.                     height: 40px;
  1158.                     cursor: pointer;
  1159.                 "
  1160.                 onclick="window.location.href='{{ path('boutique5sur5') }}'"
  1161.             >
  1162.                 Voir toute la boutique
  1163.             </button>
  1164.         </li>
  1165.     `;
  1167.     $("#product-list").html(productList + boutiqueButton);
  1168. }
  1170. // Modifications au script existant
  1171. $(document).ready(function() {
  1172.     // Fonctions pour ouvrir/fermer la sidebar
  1173.     $("#openFavoritesSidebar").click(function() {
  1174.         $("#favorites-sidebar").css("right", "0");
  1175.         loadFavorites();
  1176.     });
  1177.     
  1178.     $("#close-favorites-btn").click(function() {
  1179.         closeFavoritesSidebar();
  1180.     });
  1181.     
  1182.     // Fonction pour fermer la sidebar
  1183.     window.closeFavoritesSidebar = function() {
  1184.         $("#favorites-sidebar").css("right", "-500px");
  1185.     };
  1186.     
  1187.     // Tout sélectionner / Tout désélectionner
  1188.     $("#select-all-btn").click(function() {
  1189.         if (selectedFavorites.length === allFavorites.length) {
  1190.             // Tout désélectionner
  1191.             selectedFavorites = [];
  1192.             $(".selection-overlay > div").css("background", "transparent").html("");
  1193.             $(this).text("Tout sélectionner");
  1194.         } else {
  1195.             // Tout sélectionner
  1196.             selectedFavorites = allFavorites.map(fav => fav.id);
  1197.             $(".selection-overlay > div").css("background", "#F56040").html("<i class='bi bi-check' style='color:white;font-size:16px;'></i>");
  1198.             $(this).text("Tout désélectionner");
  1199.         }
  1200.         
  1201.         // Mettre à jour le compteur
  1202.         $("#selection-count").text(selectedFavorites.length);
  1203.         
  1204.         // Mettre à jour l'interface produits
  1205.         updateProductsView();
  1206.     });
  1207.     
  1208.     // Gestion des onglets
  1209.     $(".sidebar-tab").click(function() {
  1210.         $(".sidebar-tab").removeClass("active").css({
  1211.             "color": "#666",
  1212.             "border-bottom": "none"
  1213.         });
  1214.         $(this).addClass("active").css({
  1215.             "color": "#F56040",
  1216.             "border-bottom": "2px solid #F56040"
  1217.         });
  1218.         
  1219.         const tabId = $(this).attr("id");
  1220.         $(".tab-content").hide();
  1221.         
  1222.         if (tabId === "tab-photos") {
  1223.             $("#photos-content").show();
  1224.         } else if (tabId === "tab-products") {
  1225.             $("#products-content").show();
  1226.         }
  1227.     });
  1228.     
  1229.     // Modifier les fonctions existantes pour intercepter l'ajout/suppression de favoris
  1230.     const originalAddFavoris = window.AddFavoris;
  1231.     window.AddFavoris = function($id, $idSejour, $urlimg, $description) {
  1232.         if (originalAddFavoris) {
  1233.             originalAddFavoris($id, $idSejour, $urlimg, $description);
  1234.         }
  1235.         
  1236.         // Recharger les favoris si la sidebar est ouverte
  1237.         if ($("#favorites-sidebar").css("right") === "0px") {
  1238.             loadFavorites();
  1239.         }
  1240.     };
  1242.     const originalSupprimerFavoris = window.supprimerFavoris;
  1243.     window.supprimerFavoris = function($id, $idSejour) {
  1244.         if (originalSupprimerFavoris) {
  1245.             originalSupprimerFavoris($id, $idSejour);
  1246.         }
  1247.         
  1248.         // Recharger les favoris si la sidebar est ouverte
  1249.         if ($("#favorites-sidebar").css("right") === "0px") {
  1250.             // Retirer de la sélection si présent
  1251.             selectedFavorites = selectedFavorites.filter(favId => favId != $id);
  1252.             loadFavorites();
  1253.         }
  1254.     };
  1255.     
  1256.     // Fermer en cliquant en dehors
  1257.     $(document).click(function(event) {
  1258.         if (!$(event.target).closest("#favorites-sidebar").length && 
  1259.             !$(event.target).closest("#openFavoritesSidebar").length && 
  1260.             $("#favorites-sidebar").css("right") === "0px") {
  1261.             closeFavoritesSidebar();
  1262.         }
  1263.     });
  1264. });
  1265. // Initialisation de la sidebar
  1266. $(document).ready(function() {
  1267.     // Fonctions pour ouvrir/fermer la sidebar
  1268.     $("#openFavoritesSidebar").click(function() {
  1269.         $("#favorites-sidebar").css("right", "0");
  1270.         loadFavorites();
  1271.     });
  1272.     
  1273.     $("#close-favorites-btn").click(function() {
  1274.         $("#favorites-sidebar").css("right", "-500px");
  1275.     });
  1276.     
  1277.     // Fermer en cliquant en dehors
  1278.     $(document).click(function(event) {
  1279.         if (!$(event.target).closest("#favorites-sidebar").length && 
  1280.             !$(event.target).closest("#openFavoritesSidebar").length && 
  1281.             $("#favorites-sidebar").css("right") === "0px") {
  1282.             $("#favorites-sidebar").css("right", "-500px");
  1283.         }
  1284.     });
  1285. });
  1286.   </script>
  1287.   <script src="{{ asset('js/splide.min.js') }}"></script>
  1288.    
  1289. <script>
  1291.   document.addEventListener('DOMContentLoaded', function () {
  1292.     const openBtn = document.getElementById('openFavoritesSidebar');
  1293.     const sidebar = document.getElementById('favorites-sidebar');
  1294.     const closeBtn = document.getElementById('favorites-close');
  1296.     if (openBtn && sidebar) {
  1297.       openBtn.addEventListener('click', () => sidebar.classList.add('active'));
  1298.     }
  1300.     if (closeBtn && sidebar) {
  1301.       closeBtn.addEventListener('click', () => sidebar.classList.remove('active'));
  1302.     }
  1303.   });
  1304. </script>
  1306.  
  1307. <script>
  1308. document.addEventListener('DOMContentLoaded', function() {
  1309.   const filterBadges = document.querySelectorAll('.filter-badge');
  1311.   filterBadges.forEach(badge => {
  1312.     badge.addEventListener('click', function() {
  1313.       // Désactiver tous les badges
  1314.       filterBadges.forEach(b => b.classList.remove('active'));
  1316.       // Activer le badge cliqué
  1317.       this.classList.add('active');
  1319.     });
  1320.   });
  1321. });
  1323. </script>
  1324.   <script
  1325.     type="text/javascript"
  1326.     src="{{ asset('Accueil/js/jquery.magnific-popup.min.js') }}"
  1327.   ></script>
  1328.   <script>
  1329. document.addEventListener('DOMContentLoaded', function () {
  1330.   const prevButtons = document.querySelectorAll('.btn-prev-day');
  1331.   const nextButtons = document.querySelectorAll('.btn-next-day');
  1332.   const dateCards = document.querySelectorAll('.date-card.modern-card');
  1333.   const collapseSections = document.querySelectorAll('.collapse');
  1335.   function navigateToDay(index) {
  1336.     if (index >= 0 && index < collapseSections.length) {
  1337.       // Fermer tous les jours
  1338.       collapseSections.forEach(s => s.classList.remove('show'));
  1339.       dateCards.forEach(c => c.classList.remove('active'));
  1341.       // Ouvrir le bon jour
  1342.       const targetCollapse = collapseSections[index];
  1343.       const targetCard = dateCards[index];
  1345.       if (targetCollapse && targetCard) {
  1346.         targetCollapse.classList.add('show');
  1347.         targetCard.classList.add('active');
  1349.       }
  1350.     }
  1351.   }
  1353.   prevButtons.forEach(button => {
  1354.     button.addEventListener('click', function () {
  1355.       const targetIndex = parseInt(this.dataset.target, 10);
  1356.       navigateToDay(targetIndex);
  1357.     });
  1358.   });
  1360.   nextButtons.forEach(button => {
  1361.     button.addEventListener('click', function () {
  1362.       const targetIndex = parseInt(this.dataset.target, 10);
  1363.       navigateToDay(targetIndex);
  1364.     });
  1365.   });
  1366. });
  1367. </script>
  1369.   <script>
  1370.     document.addEventListener('DOMContentLoaded', function() {
  1371.   const style = document.createElement('style');
  1372.   style.textContent = `
  1373.     .hidden {
  1374.       display: none !important;
  1375.     }
  1376.   `;
  1377.   document.head.appendChild(style);
  1378. });
  1379.     document.addEventListener('DOMContentLoaded', function() {
  1380.     // Get the favorite button
  1381.     const favoriteButton = document.querySelector('.fav-button');
  1382.     if (favoriteButton) {
  1383.       // Make it unclickable with JS too (belt and suspenders approach)
  1384.       favoriteButton.style.pointerEvents = 'none';
  1385.       
  1386.       // Override any existing click handlers
  1387.       favoriteButton.onclick = function(e) {
  1388.         e.preventDefault();
  1389.         e.stopPropagation();
  1390.         return false;
  1391.       };
  1392.       
  1393.       // Make sure hover still works
  1394.       favoriteButton.addEventListener('mouseover', function() {
  1395.         document.getElementById('purchase-alert').style.display = 'block';
  1396.       });
  1397.       
  1398.       // Keep any existing hover functionality
  1399.       if (typeof showSelection === 'function') {
  1400.         favoriteButton.onmouseover = showSelection;
  1401.       }
  1402.     }
  1403.     
  1404.     // Make sure the purchase alert remains interactive
  1405.     const purchaseAlert = document.getElementById('purchase-alert');
  1406.     if (purchaseAlert) {
  1407.       purchaseAlert.style.pointerEvents = 'auto';
  1408.     }
  1409.   });
  1410.     // Sélection des éléments
  1411.     const purchaseAlert = document.getElementById("purchase-alert");
  1412.     const alertContent = document.getElementById("purchase-alert-content");
  1413.     const likeCountLabel = document.getElementById("likeCount");
  1414.     const favoriteCount = parseInt(likeCountLabel.textContent.trim(), 10); // Convertir en nombre
  1416.     // Fonction pour mettre à jour le contenu de l'alerte
  1417.     function updatePurchaseAlert(current) {
  1418.   let remainingForAlbum = Math.max(0, 20 - current);
  1419.   let remainingForPochette = Math.max(0, 12 - current);
  1420.   let remainingForPack = Math.max(0, 12 - current);
  1422.   const progressBar = (count, total, color) => `
  1423.   <div style="margin: 5px 0;">
  1424.     <div style="background-color: #e9ecef; border-radius: 5px; overflow: hidden; height: 8px;">
  1425.       <div style="width: ${
  1426.         (count / total) * 100
  1427.       }%; background-color: ${color}; height: 100%;"></div>
  1428.     </div>
  1429.     <small style="font-size: 12px;">${count}/${total} photos</small>
  1430.   </div>
  1431. `;
  1433.   // Use Twig paths here:
  1434.   const products = [
  1435.       {
  1436.       name: "Pochette photo (12 photos)",
  1437.       required: 12,
  1438.       remaining: remainingForPochette,
  1439.       image: "/images/produit/PochettePhoto5sur5-2.jpg",
  1440.       color: "#2196f3",
  1441.       link: "{{ path('AjoutPochettePhotos_Favoris', {'nbr': 12}) }}",
  1442.     },
  1443.        {
  1444.       name: "Pack numérique (20 photos)",
  1445.       required: 20,
  1446.       remaining: remainingForAlbum,
  1447.       image: "/images/produit/photoNumerique.jpg",
  1448.       color: "#4caf50",
  1449.       link: "{{ path('PackPhotosNumerique_Favoris', {'nbr': 20}) }}",
  1450.     }
  1451.   
  1452.   
  1453.     
  1454.   ].sort((a, b) => a.remaining - b.remaining);
  1456.   const productList = products
  1457.     .map((product) => {
  1458.       const count = current;
  1459.       const total = product.required;
  1460.       const remaining = product.remaining;
  1462.       return `
  1463.     <li style="margin-bottom: 15px;">
  1464.       <div style="display: flex; align-items: center; gap: 10px;">
  1465.         <img
  1466.           src="${product.image}"
  1467.           alt="${product.name}"
  1468.           style="width: 65px; height: 65px; border-radius: 5px; margin-top:-19px"
  1469.         />
  1470.         <div style="flex: 1;">
  1471.           <strong style="font-size: 14px;">${product.name}</strong>
  1472.           ${progressBar(count, total, product.color)}
  1473.           ${
  1474.             remaining > 0
  1475.               ? `<small style="color: ${product.color}; font-size: 12px;">
  1476.                    Encore ${remaining} photos ❤️ pour compléter ${product.name.toLowerCase()}
  1477.                  </small>`
  1478.               : `<button
  1479.                   style="
  1480.                     margin-top: 5px;
  1481.                     padding: 5px 8px;
  1482.                     background-color: ${product.color};
  1483.                     color: white;
  1484.                     border: none;
  1485.                     border-radius: 5px;
  1486.                     font-size: 12px;
  1487.                     cursor: pointer;
  1488.                   "
  1489.                   onclick="window.location.href='${product.link}'"
  1490.                 >
  1491.                   Commander
  1492.                 </button>`
  1493.           }
  1494.         </div>
  1495.       </div>
  1496.     </li>
  1497.   `;
  1498.     })
  1499.     .join("");
  1501.   const plusButton = `
  1502.     <li style="margin-bottom: 15px; text-align: center;">
  1503.       <button
  1504.         style="
  1505.           padding: 5px 8px;
  1506.           background-color: #F56040;
  1507.           color: white;
  1508.           border: none;
  1509.           border-radius: 5px;
  1510.           font-size: 14px;
  1511.           line-height: 1;
  1512.           width: 150px;
  1513.           height: 40px;
  1514.           cursor: pointer;
  1515.         "
  1516.         onclick="window.location.href='{{ path('boutique5sur5') }}'"
  1517.       >
  1518.         Aller à la boutique
  1519.       </button>
  1520.     </li>
  1521.   `;
  1523.   if (current === 0) {
  1524.     alertContent.innerHTML = `
  1525.     <p style="font-size: 16px; font-weight: bold; color: #333;">
  1526.       Vous n'avez pas encore de photos favorites !
  1527.     </p>
  1528.     <p style="margin-bottom: 20px; color: #555;">
  1529.       Commencez à ajouter vos moments préférés pour profiter de nos offres.
  1530.     </p>
  1531.     <ul style="list-style-type: none; padding: 0;">${productList}${plusButton}</ul>
  1532.   `;
  1533.   } else {
  1534.     alertContent.innerHTML = `
  1535.     <p style="font-size: 16px; font-weight: bold; color: #333;">
  1536.       Vous avez atteint ${current} photos favorites !
  1537.     </p>
  1538.     <p style="margin-bottom: 20px; color: #555;">
  1539.       Profitez de nos offres spéciales :
  1540.     </p>
  1541.     <ul style="list-style-type: none; padding: 0;">${productList}${plusButton}</ul>
  1542.   `;
  1543.   }
  1545.   purchaseAlert.classList.remove("hidden");
  1546.   clearTimeout(purchaseAlertTimeout);
  1547.   purchaseAlertTimeout = setTimeout(() => {
  1548.     if (!purchaseAlert.matches(":hover")) {
  1549.       closePurchaseAlert();
  1550.     }
  1551.   }, 5000);
  1552. }
  1554.     // Fonction pour fermer l'alerte
  1555.     function closePurchaseAlert() {
  1556.       purchaseAlert.classList.add("hidden");
  1557.     }
  1559.     // Événement pour mettre à jour le contenu et afficher la popover dynamiquement au hover
  1560.     document.querySelector(".fav-button").addEventListener("mouseover", () => {
  1561.       updatePurchaseAlert(favoriteCount);
  1562.       purchaseAlert.classList.remove("cachee"); // Réaffiche la popover
  1563.     });
  1565.     function showSelection() {
  1566.       document.getElementById("purchase-alert").style.display = "block";
  1567.     }
  1569.     function hideSelection() {
  1570.       document.getElementById("selectionPopover").style.display = "none";
  1571.     }
  1572.     document.addEventListener("DOMContentLoaded", function () {
  1573.       const container = document.querySelector(".date-container");
  1575.       // Vérifie si le conteneur existe pour éviter les erreurs
  1576.       if (container) {
  1577.         container.scrollTo({
  1578.           left: container.scrollWidth, // Scroll directement à la position maximale
  1579.           behavior: "smooth", // Défilement fluide
  1580.         });
  1581.       }
  1582.     });
  1584.     document.addEventListener("DOMContentLoaded", function () {
  1585.       const container = document.querySelector(".date-container");
  1586.       const leftArrow = document.querySelector(".scroll-btn.left");
  1587.       const rightArrow = document.querySelector(".scroll-btn.right");
  1589.       // Fonction pour vérifier le débordement et activer/désactiver les flèches
  1590.       function updateArrowsVisibility() {
  1591.         const isOverflowing = container.scrollWidth > container.clientWidth; // Vérifie si débordement
  1592.         leftArrow.style.display = isOverflowing ? "flex" : "none";
  1593.         rightArrow.style.display = isOverflowing ? "flex" : "none";
  1594.       }
  1596.       // Fonction pour défiler
  1597.       function scrollContainer(direction) {
  1598.         container.scrollBy({
  1599.           left: direction === "left" ? -200 : 200, // Défiler à gauche ou à droite
  1600.           behavior: "smooth",
  1601.         });
  1602.       }
  1604.       // Ajout des événements de clic pour les flèches
  1605.       leftArrow.addEventListener("click", () => scrollContainer("left"));
  1606.       rightArrow.addEventListener("click", () => scrollContainer("right"));
  1608.       // Vérification initiale et sur redimensionnement de la fenêtre
  1609.       updateArrowsVisibility();
  1610.       window.addEventListener("resize", updateArrowsVisibility);
  1611.     });
  1613.     document.addEventListener("DOMContentLoaded", function () {
  1614.       const container = document.querySelector(".date-container");
  1615.       const leftBtn = document.querySelector(".scroll-btn.left");
  1616.       const rightBtn = document.querySelector(".scroll-btn.right");
  1618.       leftBtn.addEventListener("click", () => {
  1619.         container.scrollBy({
  1620.           left: -200, // Défile vers la gauche
  1621.           behavior: "smooth",
  1622.         });
  1623.       });
  1625.       rightBtn.addEventListener("click", () => {
  1626.         container.scrollBy({
  1627.           left: 200, // Défile vers la droite
  1628.           behavior: "smooth",
  1629.         });
  1630.       });
  1631.     });
  1633.  document.addEventListener("DOMContentLoaded", function () {
  1634.     // Sélectionnez tous les badges de filtre
  1635.     const filterBadges = document.querySelectorAll(".filter-badge");
  1636.     // Sélectionnez tous les éléments de la galerie
  1637.     const galleryItems = document.querySelectorAll(".column");
  1638.     // Sélectionnez tous les jours
  1639.     const days = document.querySelectorAll(".collapse");
  1641.     // Fonction pour réinitialiser les filtres
  1642.     function resetFilters() {
  1643.         // Réinitialisez tous les éléments de la galerie
  1644.         galleryItems.forEach((item) => {
  1645.             item.style.display = "block";
  1646.         });
  1648.         // Réinitialisez les états des badges
  1649.         filterBadges.forEach((badge) => badge.classList.remove("active"));
  1650.     }
  1652.     // Ajoutez un gestionnaire d'événements pour chaque badge
  1653.     filterBadges.forEach((badge) => {
  1654.         badge.addEventListener("click", function () {
  1655.             const filter = this.getAttribute("data-filter");
  1657.             // Réinitialisez l'état actif pour tous les badges
  1658.             filterBadges.forEach((btn) => btn.classList.remove("active"));
  1659.             // Ajoutez l'état actif au badge cliqué
  1660.             this.classList.add("active");
  1662.             // Affichez ou masquez les éléments de la galerie
  1663.             galleryItems.forEach((item) => {
  1664.                 if (filter === "all") {
  1665.                     item.style.display = "block";
  1666.                 } else if (filter === "photo" && item.querySelector("img")) {
  1667.                     item.style.display = "block";
  1668.                 } else if (filter === "video" && item.querySelector("video")) {
  1669.                     item.style.display = "block";
  1670.                 } else if (filter === "audio" && item.classList.contains("audio-message-item")) {
  1671.                     item.style.display = "block";
  1672.                 } else {
  1673.                     item.style.display = "none";
  1674.                 }
  1675.             });
  1676.         });
  1677.     });
  1679.     // Réinitialiser les filtres lors du changement de jour
  1680.     days.forEach((day) => {
  1681.         day.addEventListener("show.bs.collapse", function () {
  1682.             resetFilters();
  1683.         });
  1684.     });
  1685. });
  1686.     $(document).ready(function () {
  1687.       let zoomCounter = 0; // Initialize zoom counter
  1688.       let currentImageSrc = ""; // Track current image source
  1689.       let lastClickPosition = { x: 50, y: 50 }; // Default to center of image
  1691.       $(".container--gallery").magnificPopup({
  1692.         delegate: "a",
  1693.         type: "image",
  1694.         mainClass: "mfp-with-zoom mfp-img-mobile",
  1695.         image: {
  1696.           verticalFit: true,
  1697.         },
  1698.         gallery: {
  1699.           enabled: true,
  1700.           tPrev: "Previous (Left arrow key)", // Alt text on left arrow
  1701.           tNext: "Next (Right arrow key)", // Alt text on right arrow
  1702.           tCounter: "%curr% of %total%", // Markup for "1 of 7" counter
  1703.         },
  1704.         zoom: {
  1705.           enabled: true,
  1706.           duration: 300,
  1707.           opener: function (element) {
  1708.             return element.find("img");
  1709.           },
  1710.         },
  1711.         callbacks: {
  1712.           open: function () {
  1713.             // Get current image data from the link that was clicked
  1714.             const currentLink = this.currItem.el;
  1715.             const imageId =
  1716.               currentLink
  1717.                 .closest(".photo-zoom")
  1718.                 .find(".heart-icon")
  1719.                 .data("id") || "";
  1720.             const sejourId =
  1721.               currentLink
  1722.                 .closest(".photo-zoom")
  1723.                 .find(".heart-icon")
  1724.                 .data("sejour-id") || "";
  1725.             const imagePath =
  1726.               currentLink
  1727.                 .closest(".photo-zoom")
  1728.                 .find(".heart-icon")
  1729.                 .data("path") || "";
  1730.             const imageDesc =
  1731.               currentLink
  1732.                 .closest(".photo-zoom")
  1733.                 .find(".heart-icon")
  1734.                 .data("description") || "";
  1735.             const isFavorite = currentLink
  1736.               .closest(".photo-zoom")
  1737.               .find(".heart-icon i")
  1738.               .hasClass("bi-heart-fill");
  1740.             const favoriteIconClass = isFavorite ? "bi-heart-fill" : "bi-heart";
  1741.             const favoriteIconColor = isFavorite ? "#f56040" : "white";
  1742.             const favoriteTooltip = isFavorite
  1743.               ? "Retirer des favoris"
  1744.               : "Ajouter aux favoris";
  1746.             const zoomControls = `
  1747.           <div class="mfp-zoom-controls">
  1748.             <button class="zoom-btn zoom-out" title="Zoom Out"><i class="fa fa-search-minus"></i></button>
  1749.             <button class="zoom-btn zoom-in" title="Zoom In"><i class="fa fa-search-plus"></i></button>
  1750.           </div>
  1751.           <div class="mfp-favorite">
  1752.             <button class="favorite-btn" 
  1753.                     data-id="${imageId}" 
  1754.                     data-sejour-id="${sejourId}" 
  1755.                     data-path="${imagePath}" 
  1756.                     data-description="${imageDesc}"
  1757.                     title="${favoriteTooltip}">
  1758.               <i class="bi ${favoriteIconClass}" style="color: ${favoriteIconColor}; text-shadow: 0px 0px 3px rgba(0,0,0,0.5);"></i>
  1759.             </button>
  1760.           </div>
  1761.           <div class="mfp-counter"></div>
  1762.         `;
  1764.             $(".mfp-content").append(zoomControls);
  1766.             initializeZoomControls();
  1767.             initializeFavoriteButton();
  1769.             const intervalId = setInterval(() => {
  1770.               const newImageSrc = $(".mfp-img").attr("src");
  1771.               if (newImageSrc !== currentImageSrc) {
  1772.                 currentImageSrc = newImageSrc;
  1773.                 zoomCounter = 0;
  1774.                 lastClickPosition = { x: 50, y: 50 }; // Reset to center
  1775.                 attachZoomHandler(); // Reattach zoom handler to new image
  1776.                 $(".mfp-img").css({
  1777.                   "transform-origin": `${lastClickPosition.x}% ${lastClickPosition.y}%`,
  1778.                   transform: `scale(1)`,
  1779.                 });
  1781.                 // Update favorite button for the new image
  1782.                 updateFavoriteButton();
  1784.                 initializeZoomControls();
  1785.                 updateCounter();
  1786.               }
  1787.             }, 100);
  1789.             this.content.on("mfpClose", function () {
  1790.               clearInterval(intervalId);
  1791.             });
  1793.             attachZoomHandler();
  1794.           },
  1795.           close: function () {
  1796.             $(".mfp-zoom-controls").remove();
  1797.             $(".mfp-favorite").remove();
  1798.             $(".mfp-counter").remove();
  1799.             zoomCounter = 0;
  1800.           },
  1801.         },
  1802.       });
  1804.       function attachZoomHandler() {
  1805.         $(".mfp-img")
  1806.           .off("click")
  1807.           .on("click", function (event) {
  1808.             event.stopPropagation(); // Prevent default navigation behavior
  1810.             // Calculate click coordinates relative to the image
  1811.             const imgOffset = $(this).offset();
  1812.             const clickX = event.pageX - imgOffset.left;
  1813.             const clickY = event.pageY - imgOffset.top;
  1814.             const imgWidth = $(this).width();
  1815.             const imgHeight = $(this).height();
  1817.             // Calculate transform-origin based on click position
  1818.             lastClickPosition = {
  1819.               x: (clickX / imgWidth) * 100,
  1820.               y: (clickY / imgHeight) * 100,
  1821.             };
  1823.             // Cycle through zoom levels: 1x, 1.5x, 2x
  1824.             zoomCounter = (zoomCounter + 1) % 3;
  1825.             const zoomLevels = [1, 1.5, 2];
  1826.             const zoomLevel = zoomLevels[zoomCounter];
  1828.             $(this).css({
  1829.               "transform-origin": `${lastClickPosition.x}% ${lastClickPosition.y}%`,
  1830.               transform: `scale(${zoomLevel})`,
  1831.             });
  1833.             updateZoomButtonState();
  1834.           });
  1835.       }
  1837.       function initializeZoomControls() {
  1838.         $(".mfp-zoom-controls .zoom-in")
  1839.           .off("click")
  1840.           .on("click", function (event) {
  1841.             event.stopPropagation();
  1842.             zoomCounter = (zoomCounter + 1) % 3;
  1843.             const zoomLevels = [1, 1.5, 2];
  1844.             const zoomLevel = zoomLevels[zoomCounter];
  1845.             $(".mfp-img").css({
  1846.               "transform-origin": `${lastClickPosition.x}% ${lastClickPosition.y}%`,
  1847.               transform: `scale(${zoomLevel})`,
  1848.             });
  1849.             updateZoomButtonState();
  1850.           });
  1852.         $(".mfp-zoom-controls .zoom-out")
  1853.           .off("click")
  1854.           .on("click", function (event) {
  1855.             event.stopPropagation();
  1856.             if (zoomCounter > 0) {
  1857.               zoomCounter -= 1;
  1858.               const zoomLevels = [1, 1.5, 2];
  1859.               const zoomLevel = zoomLevels[zoomCounter];
  1860.               $(".mfp-img").css({
  1861.                 "transform-origin": `${lastClickPosition.x}% ${lastClickPosition.y}%`,
  1862.                 transform: `scale(${zoomLevel})`,
  1863.               });
  1864.               updateZoomButtonState();
  1865.             } else {
  1866.               $.magnificPopup.close();
  1867.             }
  1868.           });
  1869.       }
  1871.       function initializeFavoriteButton() {
  1872.         $(".mfp-favorite .favorite-btn")
  1873.           .off("click")
  1874.           .on("click", function (event) {
  1875.             event.stopPropagation();
  1877.             const $this = $(this);
  1878.             const imageId = $this.data("id");
  1879.             const sejourId = $this.data("sejour-id");
  1881.             // Toggle favorite status
  1882.             const isFavorite = $this.find("i").hasClass("bi-heart-fill");
  1884.             // Update the button appearance
  1885.             if (isFavorite) {
  1886.               $this
  1887.                 .find("i")
  1888.                 .removeClass("bi-heart-fill")
  1889.                 .addClass("bi-heart")
  1890.                 .css("color", "white");
  1891.               $this.attr("title", "Ajouter aux favoris");
  1892.             } else {
  1893.               $this
  1894.                 .find("i")
  1895.                 .removeClass("bi-heart")
  1896.                 .addClass("bi-heart-fill")
  1897.                 .css("color", "#f56040");
  1898.               $this.attr("title", "Retirer des favoris");
  1899.             }
  1901.             // Update the original heart icon in the gallery
  1902.             const originalHeartIcon = $(
  1903.               `.heart-icon[data-id="${imageId}"]`
  1904.             ).find("i");
  1905.             if (isFavorite) {
  1906.               originalHeartIcon
  1907.                 .removeClass("bi-heart-fill")
  1908.                 .addClass("bi-heart")
  1909.                 .css("color", "");
  1910.             } else {
  1911.               originalHeartIcon
  1912.                 .removeClass("bi-heart")
  1913.                 .addClass("bi-heart-fill")
  1914.                 .css("color", "#f56040");
  1915.             }
  1917.             // Make AJAX call to update favorite status in the backend using Parent routes
  1918.             $.ajax({
  1919.               url: isFavorite ? "/Parent/aSupprimerFav" : "/Parent/ajouterFav",
  1920.               type: "POST",
  1921.               data: {
  1922.                 id: imageId,
  1923.                 idSejour: sejourId,
  1924.               },
  1925.               success: function (response) {
  1926.                 // Optional: Show a success message or handle response
  1927.                 console.log("Favorite status updated", response);
  1928.               },
  1929.               error: function (error) {
  1930.                 console.error("Error updating favorite status", error);
  1931.                 // Revert the icon change on error
  1932.                 if (isFavorite) {
  1933.                   $this
  1934.                     .find("i")
  1935.                     .removeClass("bi-heart")
  1936.                     .addClass("bi-heart-fill")
  1937.                     .css("color", "#f56040");
  1938.                   originalHeartIcon
  1939.                     .removeClass("bi-heart")
  1940.                     .addClass("bi-heart-fill")
  1941.                     .css("color", "#f56040");
  1942.                 } else {
  1943.                   $this
  1944.                     .find("i")
  1945.                     .removeClass("bi-heart-fill")
  1946.                     .addClass("bi-heart")
  1947.                     .css("color", "white");
  1948.                   originalHeartIcon
  1949.                     .removeClass("bi-heart-fill")
  1950.                     .addClass("bi-heart")
  1951.                     .css("color", "");
  1952.                 }
  1953.               },
  1954.             });
  1955.           });
  1956.       }
  1958.       function updateFavoriteButton() {
  1959.         // Get current image data from the current slide
  1960.         const currentSlide = $.magnificPopup.instance.currItem.el;
  1961.         const photoZoom = currentSlide.closest(".photo-zoom");
  1963.         if (photoZoom.length) {
  1964.           const heartIcon = photoZoom.find(".heart-icon");
  1965.           const imageId = heartIcon.data("id") || "";
  1966.           const sejourId = heartIcon.data("sejour-id") || "";
  1967.           const imagePath = heartIcon.data("path") || "";
  1968.           const imageDesc = heartIcon.data("description") || "";
  1969.           const isFavorite = heartIcon.find("i").hasClass("bi-heart-fill");
  1971.           const favoriteIconClass = isFavorite ? "bi-heart-fill" : "bi-heart";
  1972.           const favoriteIconColor = isFavorite ? "#f56040" : "white";
  1973.           const favoriteTooltip = isFavorite
  1974.             ? "Retirer des favoris"
  1975.             : "Ajouter aux favoris";
  1977.           // Update the favorite button
  1978.           const $favoriteBtn = $(".mfp-favorite .favorite-btn");
  1979.           $favoriteBtn.data("id", imageId);
  1980.           $favoriteBtn.data("sejour-id", sejourId);
  1981.           $favoriteBtn.data("path", imagePath);
  1982.           $favoriteBtn.data("description", imageDesc);
  1983.           $favoriteBtn.attr("title", favoriteTooltip);
  1984.           $favoriteBtn
  1985.             .find("i")
  1986.             .removeClass("bi-heart bi-heart-fill")
  1987.             .addClass(favoriteIconClass)
  1988.             .css("color", favoriteIconColor);
  1989.         }
  1990.       }
  1992.       function updateZoomButtonState() {
  1993.         const zoomLevels = [1, 1.5, 2];
  1994.         const currentZoom = zoomLevels[zoomCounter];
  1995.         $(".zoom-in").prop("disabled", currentZoom === 2);
  1996.         $(".zoom-out").prop("disabled", currentZoom === 1);
  1997.       }
  1999.       function updateCounter() {
  2000.         const counterText = $(".mfp-counter")
  2001.           .closest(".mfp-content")
  2002.           .find(".mfp-counter")
  2003.           .text();
  2004.         const matches = counterText.match(/(\d+) of (\d+)/);
  2005.         if (matches) {
  2006.           const currentIndex = matches[1];
  2007.           const totalImages = matches[2];
  2008.           $(".mfp-counter").text(`${currentIndex} of ${totalImages}`);
  2009.         }
  2010.       }
  2012.       // Add CSS for the favorite button and rounded image corners
  2013.       $("<style>")
  2014.         .prop("type", "text/css")
  2015.         .html(
  2016.           `
  2017.       .mfp-favorite {
  2018.         position: absolute;
  2019.         top: 15px;
  2020.         left: 15px;
  2021.         z-index: 1046;
  2022.       }
  2023.       .favorite-btn {
  2024.         background: transparent;
  2025.         border: none;
  2026.         font-size: 24px;
  2027.         padding: 5px;
  2028.         cursor: pointer;
  2029.         outline: none;
  2030.       }
  2031.       .favorite-btn i {
  2032.         transition: all 0.3s ease;
  2033.       }
  2034.       .favorite-btn:hover i {
  2035.         transform: scale(1.2);
  2036.       }
  2037.       /* Rounded corners for zoomed images */
  2038.       .mfp-img {
  2039.         border-radius: 8px;
  2040.       }
  2041.       /* Make sure the container doesn't clip the rounded corners */
  2042.       .mfp-figure:after {
  2043.         border-radius: 8px;
  2044.       }
  2045.     `
  2046.         )
  2047.         .appendTo("head");
  2048.     });
  2049.   </script>
  2050. <script>
  2051. document.addEventListener('DOMContentLoaded', function () {
  2052.   const openBtn = document.getElementById('openFavoritesBtn');
  2053.   const closeBtn = document.getElementById('closeSidebarBtn');
  2054.   const sidebar = document.getElementById('favoritesSidebar');
  2055.   const tbody = document.querySelector('#favoritesTable tbody');
  2057.   openBtn.addEventListener('click', async () => {
  2058.     try {
  2059.       const response = await fetch('/Parent/mes-favoris', {
  2060.         headers: {
  2061.           'Accept': 'application/json'
  2062.         }
  2063.       });
  2065.       const result = await response.json();
  2067.       if (!result.success || !Array.isArray(result.data)) {
  2068.         alert('Erreur lors du chargement des favoris.');
  2069.         return;
  2070.       }
  2072.       tbody.innerHTML = '';
  2074.       result.data.forEach((fav, index) => {
  2075.         const row = document.createElement('tr');
  2076.         row.innerHTML = `
  2077.           <td>${index + 1}</td>
  2078.           <td><img src="${fav.path}" alt="favori"></td>
  2079.           <td>${fav.descreption || '—'}</td>
  2080.           <td>${fav.created_at}</td>
  2081.         `;
  2082.         tbody.appendChild(row);
  2083.       });
  2085.       sidebar.classList.add('active');
  2086.     } catch (e) {
  2087.       console.error('Erreur réseau:', e);
  2088.       alert('Impossible de charger les favoris.');
  2089.     }
  2090.   });
  2092.   closeBtn.addEventListener('click', () => {
  2093.     sidebar.classList.remove('active');
  2094.   });
  2095. });
  2096. </script>
  2098.   <script>
  2102.         // Fonction pour vérifier et afficher l'alerte
  2103.         function checkFavorites() {
  2104.             if (favoriteCount >= 10) {
  2105.                 purchaseAlert.style.display = 'block'; // Affiche l'alerte
  2106.             } else {
  2107.                 purchaseAlert.style.display = 'none'; // Cache l'alerte si le nombre est réduit
  2108.             }
  2109.         }
  2111.         // Ajout d'un favori
  2112.         function addFavorite() {
  2113.             favoriteCount++;
  2114.             likeCountLabel.textContent = favoriteCount;
  2115.             checkFavorites();
  2117.         }
  2119.         // Suppression d'un favori
  2120.         function removeFavorite() {
  2121.             if (favoriteCount > 0) {
  2122.                 favoriteCount--;
  2123.                 likeCountLabel.textContent = favoriteCount;
  2124.                 checkFavorites();
  2127.             }
  2128.         }document.addEventListener('DOMContentLoaded', () => {
  2129.     const favoriteCount = {{ nblikes }};
  2130.     updateCardContent(favoriteCount);
  2131. });
  2133. function updateCardContent(favoriteCount) {
  2134.     const card = document.getElementById('dynamic-card');
  2135.     const cardContent = document.getElementById('dynamic-card-content');
  2137.     let produits = [];
  2139.     if (favoriteCount >= 20) {
  2140.         produits.push({
  2141.             titre: "Album débloqué !",
  2142.             bouton: "Commander",
  2143.             image: "/images/produit/Album5sur5-3.jpg",
  2144.             lien: "{{ path('EditionAlbum') }}"
  2145.         });
  2146.     }
  2147.     if (favoriteCount >= 12) {
  2148.         produits.push({
  2149.             titre: "Pochette débloquée !",
  2150.             bouton: "Commander",
  2151.             image: "/images/produit/PochettePhoto5sur5-2.jpg",
  2152.             lien: "{{ path('AjoutPochettePhotos_Favoris', {'nbr': 12}) }}"
  2153.         });
  2154.     }
  2155.     if (favoriteCount >= 5) {
  2156.         produits.push({
  2157.             titre: "Pack numérique débloqué !",
  2158.             bouton: "Commander",
  2159.             image: "/images/produit/photoNumerique.jpg",
  2160.             lien: "{{ path('PackPhotosNumerique_Favoris', {'nbr': 15}) }}"
  2161.         });
  2162.     }
  2164.     if (produits.length === 0) {
  2165.         cardContent.innerHTML = `
  2166.             <div style="text-align: center; padding: 10px;">
  2167.                 Ajoutez des favoris pour débloquer des surprises ✨
  2168.             </div>
  2169.         `;
  2170.         return;
  2171.     }
  2173.     cardContent.innerHTML = `
  2174.     <div class="splide" id="dynamicSplide">
  2175.       <div class="splide__track">
  2176.         <ul class="splide__list">
  2177.           ${produits.map(produit => `
  2178.             <li class="splide__slide" style="position: relative;">
  2179.               <img src="${produit.image}" alt="${produit.titre}" style="width: 100%; height: 150px; object-fit: cover; border-radius: 8px;">
  2180.               <div style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.1); color: white; padding: 10px; text-align: center; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;">
  2181.                 <div style="font-weight: bold; font-size: 14px;">${produit.titre}</div>
  2182.                 <button style="margin-top: 5px; padding: 5px 8px; background-color: #F56040; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;" onclick="window.location.href='${produit.lien}'">
  2183.                   ${produit.bouton}
  2184.                 </button>
  2185.               </div>
  2186.             </li>
  2187.           `).join('')}
  2188.         </ul>
  2189.       </div>
  2190.     </div>
  2191.     `;
  2193.     // Monte le carrousel
  2194.     new Splide('#dynamicSplide', {
  2195.         type: 'loop',
  2196.         arrows: true,
  2197.         pagination: false,
  2198.         autoplay: true,
  2199.         interval: 4000,
  2200.         speed: 800,
  2201.     }).mount();
  2202. }
  2205.         function supprimerFavoris($id, $idSejour) {
  2206.             // Vider l'élément coeur pour ce favori
  2207.             const coeurElement = $('#coeur' + $id);
  2208.             coeurElement.empty();
  2210.             // Ajout d'une animation sur le bouton favori
  2211.             const favoriteButton = document.querySelector('.fav-button');
  2212.             if (favoriteButton) {
  2213.                 favoriteButton.classList.add('active');
  2214.                 // Retirer l'animation après qu'elle soit jouée
  2215.                 setTimeout(() => {
  2216.                     favoriteButton.classList.remove('active');
  2217.                 }, 600); // La durée doit correspondre à celle de l'animation
  2218.             }
  2220.             // Mise à jour de l'icône coeur
  2221.             const clas = $('.IconImag6').hasClass('active') ? "IconDelete IconDeletesix" : "IconDelete";
  2222.             coeurElement.html(
  2223.                 `<i class="bi bi-heart ${clas}" onclick="AddFavoris(${$id}, ${$idSejour})"></i>`
  2224.             );
  2226.             // Mettre à jour le compteur des favoris
  2227.             const likeCountLabel = document.getElementById('likeCount');
  2228.            const likeMesFavLabel = document.getElementById('mesFavCount');
  2229.              if (likeMesFavLabel) {
  2230.                 let currentCount = parseInt(likeMesFavLabel.textContent.trim(), 10) || 0;
  2231.                 currentCount = Math.max(0, currentCount - 1); // Empêche le compteur d'aller en dessous de 0
  2232.                 likeMesFavLabel.textContent = currentCount;
  2234.             }
  2235.             if (likeCountLabel) {
  2236.                 let currentCount = parseInt(likeCountLabel.textContent.trim(), 10) || 0;
  2237.                 currentCount = Math.max(0, currentCount - 1); // Empêche le compteur d'aller en dessous de 0
  2238.                 likeCountLabel.textContent = currentCount;
  2240.                 // Mettre à jour la valeur dans l'input hidden
  2241.                 const nbFavCurrentInput = $('#nbFavCurrent');
  2242.                 if (nbFavCurrentInput.length) {
  2243.                     nbFavCurrentInput.val(currentCount);
  2244.                 }
  2245.             }
  2247.             // Préparation des données pour l'Ajax
  2248.             const $_data = { 'id': $id, 'idSejour': $idSejour };
  2250.             // Appel Ajax pour supprimer le favori
  2251.             $.ajax({
  2252.                 type: "POST",
  2253.                 url: "{{ path('Supprimer_fav') }}",
  2254.                 data: $_data,
  2255.                 success: function () {
  2256.                     // Réactiver les icônes après succès
  2257.                     $('.IconDelete').each(function () {
  2258.                         $(this).css('pointer-events', '');
  2259.                     });
  2262.                 },
  2263.                 error: function (xhr, status, error) {
  2264.                     console.error('Erreur lors de la suppression du favori :', error);
  2265.                 }
  2266.             });
  2267.         }
  2269.         function AddFavoris($id, $idSejour, $urlimg, $description) {
  2270.            // console.log('Adding favorite:', { attachmentId, sejourId, path, description });
  2271.   $("#close-favorites-btn").click()
  2272.             favoriteButton.classList.add('active');
  2273.    const likeMesFavLabel = document.getElementById('mesFavCount');
  2274.       
  2275.             const likeCountLabel = document.getElementById('likeCount');
  2277.             if (likeCountLabel) {
  2278.                 let currentCount = parseInt(likeCountLabel.textContent.trim(), 10) || 0;
  2279.                 likeCountLabel.textContent = currentCount + 1;
  2280.                      likeMesFavLabel.textContent = currentCount + 1;
  2281.             }
  2282.         // Retirer l'animation après qu'elle soit jouée
  2283.         setTimeout(() => {
  2284.             favoriteButton.classList.remove('active');
  2285.         }, 600); // La durée doit correspondre à celle de l'animation
  2286.             $('#coeur' + $id).empty();
  2287.             var clas = $('.IconImag6').hasClass('active') ? "IconDelete IconDeletesix" : "IconDelete";
  2288.             $('#coeur' + $id).html("<i class=\"bi bi-heart-fill favSelect " + clas + "\" onclick=\"supprimerFavoris(" + $id + "," + $idSejour + ")\"></i>");
  2289.             var $total = parseInt($("#totalLike").html()) + 1;
  2290.             $("#totalLike").html($total);
  2291.             $("#totalLikeTitle").html($total);
  2292.             $("#totalLikeMobile").html($total);
  2295.             var $data = { 'id': $id, 'idSejour': $idSejour };
  2296.             $.ajax({
  2297.                 type: "POST",
  2298.                 url: "{{ path('Ajouter_fav') }}",
  2299.                 data: $data,
  2300.                 success: function () {
  2301.                     $('.IconDelete').each(function () {
  2302.                         $(this).css('pointer-events', '');
  2303.                     });
  2305.                     if ($description === undefined) {
  2306.                         $description = ''; // Set it to an empty string
  2307.                     }
  2308.                     $('.rowMaselection').append(
  2309.                         '<div class="column" id="column-' + $id + '">'+
  2310.                         '<a style="position: relative;" title="Enlever de ma sélection" onclick="supprimerFavoris(' + $id + ',' + $idSejour + ')" class="iconeSuppImg"><i class="bi bi-x" style="font-size:17px;cursor:pointer;color:#d30909;float:right;margin-top:-3%;margin-right:2%"></i></a>'+
  2311.                         '<a class="photo-zoom">'+
  2312.                         '<img data-idAtach="'+$id+'" id="'+$idSejour+'" src="'+$urlimg+'"></a>'+
  2313.                         ($description ? '<h4 id="commint" class="titleHeadPhoto">'+$description+'</h4>' : '')+ // Only add the <h4> if $description is not empty
  2314.                         '</div>'
  2315.                     );
  2317.                     // Directly update nbLikes count in the header
  2318.                     var currentNbLikes = parseInt($('#favoris-link-Accueilpayment .nbrpanier').text());
  2319.                     var newNbLikes = currentNbLikes + 1;
  2320.                     $('#favoris-link-Accueilpayment .nbrpanier').text(newNbLikes);
  2321.                 },
  2322.                 error: function (xhr, status, error) {
  2323.                     console.error('Error:', error);
  2324.                 }
  2325.             });
  2326.         }
  2328.         $(document).on('click', '.bi-heart, .bi-heart-fill', function () {
  2329.         const heartIcon       = $(this);
  2330.         const heartContainer  = heartIcon.closest('.heart-icon');
  2332.         // Extract data attributes
  2333.         const attachmentId    = heartContainer.data('id');
  2334.         const sejourId        = heartContainer.data('sejour-id');
  2335.         const path            = heartContainer.data('path');
  2336.         const description     = heartContainer.data('description');
  2337.         const isFavorite      = heartIcon.hasClass('bi-heart-fill');
  2339.         // Get the input that contains the favorite count
  2340.         const likeFavInput    = document.getElementById('nbFavCurrent');
  2341.         let favoriteNb        = parseInt(likeFavInput.value, 10);
  2343.         if (isFavorite) {
  2344.             // Remove from favorites
  2345.             supprimerFavoris(attachmentId, sejourId);
  2347.             favoriteNb = Math.max(0, favoriteNb - 1);
  2348.             likeFavInput.value = favoriteNb;
  2350.             updateCardContent(favoriteNb);
  2351.               updateFavoritesSidebar();
  2352.                  $("#close-favorites-btn").click()
  2354.         } else {
  2355.             // Add to favorites
  2356.             AddFavoris(attachmentId, sejourId, path, description);
  2358.             favoriteNb = favoriteNb + 1;
  2359.             likeFavInput.value = favoriteNb;
  2361.             updateCardContent(favoriteNb);
  2362.        
  2363.             updateFavoritesSidebar();
  2364.                $("#close-favorites-btn").click()
  2365.         }
  2367.         // **** SIMPLE STEP: Update the purchase alert ****
  2368.         // This will refresh the progress bars, count, etc.
  2369.         updatePurchaseAlert(favoriteNb);
  2370.     });
  2374.         // Gestion dynamique du clic sur les icônes cœur
  2375.         $(document).on('click', '.bi-hsddddeart, .bi-hdddeart-fill', function () {
  2376.             const heartIcon = $(this);
  2377.           //  const heartIcon = $(this);
  2378.             //const attachmentId = heartIcon.data('id'); // Récupère l'ID directement
  2379.             const attachmentId = heartIcon.closest('.heart-icon').attr('id').replace('coeur', '');
  2380.             const sejourId = heartIcon.data('sejour-id'); // Store the sejour ID in a data attribute
  2381.             const isFavorite = heartIcon.hasClass('bi-heart-fill');
  2383.             // Récupérer l'input contenant le nombre de favoris
  2384.             const likeFavInput = document.getElementById('nbFavCurrent');
  2385.             let favoriteNb = parseInt(likeFavInput.value, 10); // Utiliser .value pour les inputs
  2387.             // Validation pour éviter les NaN
  2388.             if (isNaN(favoriteNb)) {
  2389.                 favoriteNb = 0;
  2390.             }
  2392.             if (isFavorite) {
  2393.                 // Si c'est un favori, le supprimer
  2394.                 supprimerFavoris(attachmentId, sejourId);
  2396.                 // Décrémenter le compteur
  2397.                 favoriteNb = Math.max(0, favoriteNb - 1);
  2398.                 likeFavInput.value = favoriteNb; // Mettre à jour la valeur de l'input
  2400.                 // Mettre à jour dynamiquement le contenu des cartes ou popovers
  2401.                 updateCardContent(favoriteNb);
  2403.             } else {
  2404.                 // Si ce n'est pas un favori, l'ajouter
  2405.                 const path = heartIcon.data('path'); // Path de l'attachement
  2406.                 const description = heartIcon.data('description'); // Description de l'attachement
  2407.                 AddFavoris(attachmentId, sejourId, path, description);
  2408.           // Décrémenter le compteur
  2409.                 favoriteNb = Math.max(0, favoriteNb + 1);
  2410.                 likeFavInput.value = favoriteNb; // Mettre à jour la valeur de l'input
  2411.                 // Incrémenter le compteur
  2414.                 // Mettre à jour dynamiquement le contenu des cartes ou popovers
  2415.                 updateCardContent(favoriteNb);
  2416.             }
  2418.             // Mettre à jour dynamiquement la popover ou d'autres éléments liés
  2419.         });
  2422.         // Ajoutez les événements sur les icônes de cœur
  2423.         document.querySelectorAll('.IconDelete').forEach((icon) => {
  2424.             icon.addEventListener('click', (event) => {
  2425.                 const isFavorite = icon.classList.contains('bi-heart-fill');
  2426.                 if (isFavorite) {
  2427.                     removeFavorite();
  2428.                     icon.classList.remove('bi-heart-fill');
  2429.                     icon.classList.add('bi-heart');
  2430.                 } else {
  2431.                     addFavorite();
  2432.                     icon.classList.remove('bi-heart');
  2433.                     icon.classList.add('bi-heart-fill');
  2434.                 }
  2435.             });
  2436.         });
  2438.         // Vérifie l'état initial
  2439.         checkFavorites();
  2440.   </script>
  2441.   <!-- Initialisation -->
  2442.   <script>
  2443.     AOS.init({
  2444.       duration: 800, // Duration of animations in milliseconds
  2445.       easing: "ease-in-out", // Animation timing function
  2446.     });
  2447.     document.addEventListener("DOMContentLoaded", function () {
  2448.       const dateCards = document.querySelectorAll(".date-card");
  2449.       const sections = document.querySelectorAll(".collapse");
  2451.       dateCards.forEach((card) => {
  2452.         card.addEventListener("click", function () {
  2453.           // Supprimer les classes actives des autres cartes et sections
  2454.           dateCards.forEach((c) => c.classList.remove("active"));
  2455.           sections.forEach((s) => s.classList.remove("show"));
  2457.           // Ajouter la classe active à la carte cliquée
  2458.           this.classList.add("active");
  2460.           // Récupérer la cible et afficher la bonne section
  2461.           const targetId = this.getAttribute("data-bs-target");
  2462.           const targetSection = document.querySelector(targetId);
  2463.           if (targetSection) {
  2464.             targetSection.classList.add("show");
  2465.           }
  2466.         });
  2467.       });
  2468.     });
  2469.     document.addEventListener("DOMContentLoaded", function () {
  2470.       // Initialisation du carrousel Splide
  2471.       var splide = new Splide("#imageSlider", {
  2472.         type: "loop",
  2473.         perPage: 1,
  2474.         autoplay: true,
  2475.         interval: 6000,
  2476.         pauseOnHover: false,
  2477.         pauseOnFocus: false,
  2478.         pagination: false, // Désactive la pagination
  2479.         arrows: false,
  2480.       });
  2482.       splide.mount();
  2484.       // Fonction pour faire défiler automatiquement vers la section suivante avec un ajustement personnalisé de la hauteur
  2485.       function scrollToNextSection() {
  2486.         const targetSection = document.getElementById("scrollTarget");
  2487.         if (targetSection) {
  2488.           const targetPosition =
  2489.             targetSection.getBoundingClientRect().top + window.scrollY; // Position de la section
  2490.           const adjustedPosition = targetPosition - 50; // Réduit la hauteur du scroll de 150px (ajustez selon vos besoins)
  2492.           // Scroll vers la position ajustée
  2493.           window.scrollTo({
  2494.             top: adjustedPosition,
  2495.             behavior: "smooth",
  2496.           });
  2497.         }
  2498.       }
  2500.       // Démarrer le timer pour le scroll automatique après 10 secondes
  2501.       setTimeout(scrollToNextSection, 5000); // 10 secondes
  2502.     });
  2503.   </script>
  2505.   <script>
  2508.         document.addEventListener('DOMContentLoaded', function () {
  2509.             var myModal = new bootstrap.Modal(document.getElementById('PubProd'));
  2510.             myModal.show();
  2511.         });
  2512.         // Function to close the modal
  2513.     function closeModal() {
  2514.         var myModal = bootstrap.Modal.getInstance(document.getElementById('PubProd'));
  2515.         if (myModal) {
  2516.             myModal.hide();
  2517.         }
  2518.     }
  2520.     const favoriteButton = document.querySelector('.fav-button');
  2522.     favoriteButton.addEventListener('click', () => {
  2523.         // Ajouter la classe 'active' pour déclencher l'éclat
  2524.         favoriteButton.classList.add('active');
  2526.         // Retirer l'animation après qu'elle soit jouée
  2527.         setTimeout(() => {
  2528.             favoriteButton.classList.remove('active');
  2529.         }, 600); // La durée doit correspondre à celle de l'animation
  2530.     });
  2531.     
  2532.     //const HeartAddButton = document.querySelector('.IconDelete');
  2534.     $(".IconDelete").on('click', () => {
  2535.         // Ajouter la classe 'active' pour déclencher l'éclat
  2536.         favoriteButton.classList.add('active');
  2538.         // Retirer l'animation après qu'elle soit jouée
  2539.         setTimeout(() => {
  2540.             favoriteButton.classList.remove('active');
  2541.         }, 600); // La durée doit correspondre à celle de l'animation
  2542.     });
  2546.     $(document).ready(function() {
  2547.         // Attach click event to collapse triggers
  2548.         const lastCard = $('.date-card.modern-card.active');
  2549.         const lastTargetId = lastCard.attr('data-bs-target');
  2551.         if (lastTargetId) {
  2552.             $(lastTargetId).collapse('show'); // Expand the last collapse section
  2553.             LoadImagesCloud($(lastTargetId)); // Load images for the last day
  2554.         }
  2555.         $('[data-bs-toggle="collapse"]').on('click', function() {
  2556.             var targetId = $(this).attr('data-bs-target'); // Get the target ID
  2557.             $('.date-card.modern-card').removeClass('active'); // Remove 'active' class from all cards
  2558.             $(this).addClass('active'); // Add 'active' class to the clicked card
  2559.             LoadImagesCloud($(targetId)); // Ensure this function works as expected
  2560.                // Hide all other collapses except the one clicked
  2563.                $('[data-bs-target]').each(function() {
  2564.                 var currentTargetId = $(this).attr('data-bs-target');
  2565.                 // If the current collapse is not the one clicked, hide it
  2566.                 if (currentTargetId !== targetId) {
  2567.                     $(currentTargetId).collapse('hide');
  2568.                     //$('[data-bs-toggle="collapse"]').removeClass('active'); // Remove active class from all cards
  2570.                     //Modifier leurs style en non active aussi
  2571.                 }
  2572.             });
  2574.         });
  2575.     });
  2577.     function rotateIcone(iconId) {
  2578.         // Use the icon ID to target the specific element
  2579.         var icon = $('#' + iconId);
  2581.         // Toggle the rotate-right class to apply rotation
  2582.         if (icon.hasClass('rotate-right')) {
  2583.             icon.removeClass('rotate-right'); // Remove rotation class
  2584.         } else {
  2585.             icon.addClass('rotate-right'); // Add rotation class
  2586.         }
  2587.     }
  2591.             $(document).ready(function () {
  2592.                 $total1 = parseInt($("#esphoto").find('strong').html().replace('(', '').replace(')', ''));
  2594.                 $('[data-bs-toggle="tooltip"]').tooltip();
  2600.                 {% if app.session.get("paymentmoniteco") %}
  2601.                 {% if app.session.get("paymentmoniteco") == "succses" %}
  2603.                 Swal.fire({
  2605.                     icon: 'success',
  2606.                     title: ' succès ',
  2607.                     text: 'votre commande est validée'
  2609.                 });
  2611.                 {% endif %}
  2612.                 {% endif %}
  2614.                 if ($total1 > 0) {
  2615.                     $('.iconeFleche').first().click();
  2616.                     //  $([document.documentElement, document.body]).animate({
  2617.                     //  scrollTop: $('.iconeFleche').last().offset().top
  2618.                     //  }, );
  2619.                 }
  2620.                 else {
  2621.                     $(window).scrollTop(0);
  2622.                 }
  2624.                 var slider = $('.responsive').slick({
  2625.                     infinite: true,
  2626.                     slidesToShow: 1,
  2627.                     slidesToScroll: 1,
  2628.                     autoplay: true,
  2629.                     autoplaySpeed: 4000,
  2630.                     pauseOnFocus: false,
  2631.                     pauseOnHover: false,
  2632.                     draggable: false,
  2633.                     fade: true
  2635.                 });
  2636.                 $('.responsive').css('display', 'block');
  2637.                 $('.namePRD').css('display', 'block');
  2639.                 var currSlide = 0;
  2640.                 var nextSlide = 0;
  2643.                 slider.on('afterChange', function (event, slick, currentSlide) {
  2645.                     console.log(typeof ($('.slick-active .slick-current').find('.imgproduit2')) != "undefined");
  2646.                     if (typeof ($('.slick-active .slick-current').find('.imgproduit2')) != "undefined") {
  2647.                         setTimeout(function () {
  2648.                             $('.slick-active .imgproduit1').removeClass('animated fadeIn');
  2649.                             $('.slick-active .imgproduit1').addClass('animated fadeOut');
  2650.                             $('.slick-active .imgproduit1').css('display', 'none');
  2651.                             $('.slick-active .imgproduit2').css('display', 'block');
  2652.                             $('.slick-active .imgproduit2').removeClass('animated fadeOut');
  2653.                             $('.slick-active .imgproduit2').addClass('animated fadeIn');
  2654.                         }, 2000);
  2655.                     }
  2656.                 });
  2658.                 slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
  2659.                     currSlide = currentSlide;
  2660.                     $('.imgproduit2').each(function () {
  2661.                         $(this).removeClass('animated fadeIn');
  2662.                         $(this).addClass('animated fadeOut');
  2663.                         $(this).css('display', 'none');
  2664.                     });
  2665.                     $('.imgproduit1').each(function () {
  2666.                         $(this).css('display', 'block');
  2667.                         $(this).removeClass('animated fadeOut');
  2668.                         $(this).addClass('animated fadeIn');
  2669.                     });
  2670.                 });
  2671.                 $('.columnPub').each(function () {
  2672.                     $(this).slick({
  2673.                         infinite: true,
  2674.                         speed: 50,
  2675.                         fade: true,
  2676.                         slidesToShow: 1,
  2677.                         slidesToScroll: 1,
  2678.                         autoplay: true,
  2679.                         pauseOnFocus: false,
  2680.                         pauseOnHover: false,
  2681.                         draggable: false
  2683.                     });
  2684.                     $(this).css('display', 'block');
  2685.                 });
  2686.                 $("#offrePack").click();
  2687.                 {%if app.user.showpubprod != 'false' %}
  2688.                 $('#btnPubProd').click();
  2689.                 $('.modal-backdrop').css('background-color', 'rgba(0, 0, 0, 0.2)');
  2690.                 {% endif %}
  2691.             });
  2692.             $("#closeImage").click(function () {
  2693.                 $('#myModalImage').css('display', "none");
  2694.             });
  2695.             $.ajax({
  2696.                 type: "POST",
  2697.                 url: "{{ path("delateSession_parent") }}",
  2698.                 success: function () { }
  2699.             });
  2700.             function afficheDiv(elem) {
  2701.                 $('.nav-link').each(function () {
  2702.                     $(this).removeClass('active');
  2703.                 });
  2705.                 elem.addClass('active');
  2706.                 if (elem.attr('id') === "esphoto" || elem.attr('id') === "esphotoMobile") {
  2707.                     $("#espacphoto").show();
  2708.                     $("#espacemessage").hide();
  2709.                     $("#espaceMa_selection").hide();
  2710.                     pageMenu = 'MonSejour'
  2711.                     $(this).addClass('active');
  2712.                    $('#imageActifphoto').css('display', 'block');
  2713.                      $('#imagenoActifphoto').css('display', 'none');
  2714.                    $('#VocalActivee').css('display', 'none');
  2715.                      $('#noActifVocal').css('display', 'block');
  2717.                 }
  2718.                 if (elem.attr('id') === "esmessage" || elem.attr('id') === "esmessageMobile") {
  2719.                     $("#espacphoto").hide();
  2720.                     $("#espaceMa_selection").hide();
  2721.                     $("#espacemessage").show();
  2722.                     pageMenu = 'BoiteVocale'
  2723.                     $("#espaceMa_selection").hide();
  2724.                     $(this).addClass('active');
  2725.                   $('#imageActifphoto').css('display', 'none');
  2726.                      $('#imagenoActifphoto').css('display', 'block');
  2727.                    $('#VocalActivee').css('display', 'block');
  2728.                      $('#noActifVocal').css('display', 'none');
  2732.                 }
  2733.                 if (elem.attr('id') === "esselection" || elem.attr('id') === "esselectionMobile") {
  2734.                     $("#espacphoto").hide();
  2735.                     $("#espacemessage").hide();
  2736.                     $("#espaceMa_selection").show();
  2737.                     $(homeNavmob).removeClass('bi bi-house-door-fill');
  2738.                     $(homeNavmob).addClass('bi bi-house-door');
  2739.                     $(micromob).removeClass('bi bi-mic-fill');
  2740.                     $(micromob).addClass('bi bi-mic');
  2741.                     $(selecNavmob).removeClass('bi bi-heart');
  2742.                     $(selecNavmob).addClass('bi bi-heart-fill');
  2744.                 }
  2745.             }
  2754.             function LoadImagesCloud($element) {
  2755.                 $element.find('.photo-zoom img').each(function ($this) {
  2756.                     if ($(this).attr('data-src') != $(this).attr('src')) {
  2757.                         $(this).attr('src', $(this).attr('data-src'));
  2758.                     }
  2759.                 });
  2760.             }
  2762.       function afficheDivFooterMobile(elem) {
  2763.              if(elem =='esphotoMobile') {
  2764.                    $("#espacphoto").show();
  2765.                     $("#espacemessage").hide();
  2766.                     $("#espaceMa_selection").hide();
  2767.                     $("#storevide").hide();
  2768.                     $("#storefull").show();
  2769.                     $("#fullphoto").show();
  2770.                     $("#videphoto").hide()
  2771.                     $("#vocalfull").hide();
  2772.                     $("#vocalvide").show();
  2774.                 }
  2775.                 if (elem === "esmessageMobile" ) {
  2776.                     $("#espacphoto").hide();
  2777.                     $("#espacemessage").show();
  2778.                     $("#espaceMa_selection").hide();
  2779.                     $("#storefull").hide();
  2780.                     $("#storevide").show();
  2781.                     $("#fullphoto").hide();
  2782.                     $("#videphoto").show()
  2783.                     $("#vocalfull").show();
  2784.                     $("#vocalvide").hide();
  2787.                 }
  2789.             }
  2790.             function permutation(elem) {
  2791.                 $(".IconImag").each(function () {
  2792.                     $(this).removeClass('active');
  2793.                 });
  2794.                 elem.addClass("active");
  2795.             }
  2797.             function per(elem) {
  2798.                 $(".list-group-item ").each(function () {
  2799.                     $(this).removeClass('show');
  2800.                 });
  2801.                 elem.addClass("active");
  2802.                 $("#iconeFleche").addClass('active');
  2803.             }
  2804.            function setidattach(id) {
  2805.                 $("#idattachipmut").val(id)
  2806.             }
  2808.             var ParentAjouterALL_fav = "{{ path('ParentAjouterALL_fav') }}";
  2809.             function AllFavoris($idSejour) {
  2810.                 $('#SelectALL').html('Désélectionner tout');
  2811.                 $('#SelectALL').css('pointer-events', 'none');
  2812.                 $('#SelectALL').css('opacity', '0.5');
  2813.                 $('#SelectALL').css('cursor', 'no-drop');
  2814.                 $('#SelectALL1').html('Désélectionner tout');
  2815.                 $('#SelectALL1').css('pointer-events', 'none');
  2816.                 $('#SelectALL1').css('opacity', '0.5');
  2817.                 $('#SelectALL1').css('cursor', 'no-drop');
  2818.                 $data = { 'idSejour': $idSejour }
  2819.                 $.ajax({
  2820.                     type: "POST",
  2821.                     url: "{{ path('ParentAjouterALL_fav') }}",
  2822.                     data: $data,
  2823.                     success: function () {
  2824.                         location.reload();
  2825.                     }
  2826.                 });
  2827.             }
  2829.             function RemoveAllFavoris($idSejour) {
  2830.                 $('#SelectALL').html('Sélectionner tout');
  2831.                 $('#SelectALL').css('pointer-events', 'none');
  2832.                 $('#SelectALL').css('opacity', '0.5');
  2833.                 $('#SelectALL').css('cursor', 'no-drop');
  2834.                 $('#SelectALL1').html('Sélectionner tout');
  2835.                 $('#SelectALL1').css('pointer-events', 'none');
  2836.                 $('#SelectALL1').css('opacity', '0.5');
  2837.                 $('#SelectALL1').css('cursor', 'no-drop');
  2838.                 $data = { 'idSejour': $idSejour }
  2839.                 $.ajax({
  2840.                     type: "POST",
  2841.                     url: "{{ path('ParentSupprimer_ALLfav') }}",
  2842.                     data: $data,
  2843.                     success: function () {
  2844.                         location.reload();
  2845.                     }
  2846.                 });
  2847.             }
  2849.             // Get the elements with class="column"
  2850.             var elements = document.getElementsByClassName("column");
  2851.             // Declare a "loop" variable
  2852.             var i;
  2853.             // Full-width images
  2854.             function Four() {
  2855.                 for (i = 0; i < elements.length; i++) {
  2856.                     elements[i].style.flex = "0 0 25%";
  2857.                 }
  2858.                 $('.IconDelete').attr('class', 'IconDelete ');
  2859.                 $('.photo-zoom ').attr('class', 'photo-zoom');
  2860.                 $('.localistaion').css('visibility', 'visible');
  2861.                 $('.localistaion').attr('class', 'localistaion');
  2862.                 $('.legend').css('visibility', 'visible');
  2863.                 $('.columnPub').each(function () {
  2864.                     $(this).css('max-width', '25%');
  2865.                     $(this).find('.slick-list').removeClass('miniature');
  2866.                     $(this).find('.single_service').removeClass('miniature');
  2867.                     $(this).find('.bottomdivpub').removeClass('miniature');
  2868.                 });
  2869.             }
  2871.             // Two images side by side
  2872.             function six() {
  2873.                 for (i = 0; i < elements.length; i++) {
  2874.                     elements[i].style.flex = "0 0 15%";
  2875.                 }
  2876.                 $('.column').css('padding', '0px 10px 0px 0px');
  2877.                 $('.localistaion').attr('class', 'localistaion localistaionsix');
  2878.                 $('.IconDelete').attr('class', 'IconDelete IconDeletesix');
  2879.                 $('.legend').css('visibility', 'visible');
  2880.                 $('.photo-zoom ').attr('class', 'photo-zoom heightimg');
  2881.                 $('.columnPub').each(function () {
  2882.                     $(this).css('max-width', '15%');
  2883.                     $(this).find('.slick-list').addClass('miniature');
  2884.                     $(this).find('.single_service').addClass('miniature');
  2885.                     $(this).find('.bottomdivpub').addClass('miniature');
  2886.                 });
  2887.             }
  2889.             // Four images side by side
  2890.             function two() {
  2891.                 for (i = 0; i < elements.length; i++) {
  2892.                     elements[i].style.flex = "0 0 40%";
  2893.                 }
  2894.                 $('.column').css('padding', '14px 10px');
  2895.                 $('.column').css('max-width', '40%');
  2896.                 $('.localistaion').css('visibility', 'visible');
  2897.                 $('.legend').css('visibility', 'visible');
  2898.                 $('.photo-zoom ').attr('class', 'photo-zoom');
  2899.                 $('.localistaion').attr('class', 'localistaion localistaiontwo');
  2900.                 $('.IconDelete').attr('class', 'IconDelete IconDeletetwo');
  2901.                 $('.legend').attr('class', 'legend legendtwo');
  2902.                 $('.columnPub').each(function () {
  2903.                     $(this).css('max-width', '40%');
  2904.                     $(this).find('.slick-list').removeClass('miniature');
  2905.                     $(this).find('.single_service').removeClass('miniature');
  2906.                     $(this).find('.bottomdivpub').removeClass('miniature');
  2907.                 });
  2908.             }
  2912.             function hidePopPub() {
  2914.                 $('.modal-backdrop').css('background-color', 'rgb(0, 0, 0)');
  2915.             }
  2918.             function changeHref(elem, newhref) {
  2919.                 $(elem).parent().attr('href', newhref);
  2920.             }
  2922.             function VerifNbLikes(nblikes) {
  2924.                 $('#allerAlaBoutique').click();
  2926.             }
  2927.     function handleMenuClick(menuId, pageMenu) {
  2928.         // Reset all icons
  2929.         document.getElementById('imagenoActifphoto').style.display = 'block';
  2930.         document.getElementById('imageActifphoto').style.display = 'none';
  2931.         document.getElementById('nofavorisVocal').style.display = 'block';
  2932.         document.getElementById('favorisActive').style.display = 'none';
  2933.         document.getElementById('noActifVocal').style.display = 'block';
  2934.         document.getElementById('VocalActivee').style.display = 'none';
  2936.         // Set selected icon
  2937.         if (menuId === 'photo') {
  2938.             document.getElementById('imagenoActifphoto').style.display = 'none';
  2939.             document.getElementById('imageActifphoto').style.display = 'block';
  2940.         } else if (menuId === 'selection') {
  2941.             document.getElementById('nofavorisVocal').style.display = 'none';
  2942.             document.getElementById('favorisActive').style.display = 'block';
  2943.         } else if (menuId === 'message') {
  2944.             document.getElementById('noActifVocal').style.display = 'none';
  2945.             document.getElementById('VocalActivee').style.display = 'block';
  2946.         }
  2948.         // Handle any other necessary logic
  2949.         $('#list-tab-photo').removeClass('show');
  2950.         $('#list-tab-message').removeClass('show');
  2951.         afficheDiv($(`#${menuId}`));
  2952.     }
  2953.   </script>
  2954.   <script>
  2955.     $(document).ready(function () {
  2956.       $("#PubProd").on("hidden.bs.modal", function () {
  2957.         $(document).trigger("modalClosed");
  2958.       });
  2959.     });
  2960.   </script>
  2961.   <script>
  2962.     $(document).ready(function () {
  2963.       $("#noShow").on("change", function () {
  2964.         if ($(this).is(":checked")) {
  2965.           $.ajax({
  2966.             url: "/Parent/showpub",
  2967.             type: "POST",
  2968.             dataType: "json",
  2969.             success: function (response) {
  2970.               if (response.status === "success") {
  2971.                 console.log("User showpubprod updated successfully.");
  2972.               } else {
  2973.                 console.log("Error:", response.message);
  2974.               }
  2975.             },
  2976.             error: function (xhr, status, error) {
  2977.               console.log("AJAX Error:", error);
  2978.             },
  2979.           });
  2980.         }
  2981.       });
  2982.     });
  2983.   </script>
  2984. </div>
  2985. <!-- Script pour la sidebar des favoris -->
  2986. <script>
  2987.   $(document).ready(function() {
  2988.     // Ouvrir la sidebar
  2989.     $("#openFavoritesSidebar").click(function() {
  2990.       $(".favorites-sidebar").addClass("open");
  2991.       loadFavorites();
  2992.     });
  2993.     
  2994.     // Fermer la sidebar
  2995.     $(".favorites-close").click(function() {
  2996.       $(".favorites-sidebar").removeClass("open");
  2997.     });
  2998.     
  2999.     // Charger les favoris
  3000.     function loadFavorites() {
  3001.       $.ajax({
  3002.         url: "/Parent/mes-favoris",
  3003.         type: "GET",
  3004.         dataType: "json",
  3005.         beforeSend: function() {
  3006.           $("#favorites-grid").html("<div style='text-align:center'>Chargement...</div>");
  3007.         },
  3008.         success: function(data) {
  3009.           $("#favorites-grid").empty();
  3010.           
  3011.           if (data.data && data.data.length > 0) {
  3012.             $("#favorites-empty-state").hide();
  3013.             
  3014.             $.each(data.data, function(i, fav) {
  3015.               var item = $("<div class='favorite-item'></div>");
  3016.               var img = $("<img>").attr("src", fav.path).attr("alt", fav.descreption || "Photo favorite");
  3017.               var overlay = $("<div class='favorite-overlay'></div>");
  3018.         
  3019.               
  3020.               btn.click(function(e) {
  3021.                 e.preventDefault();
  3022.                 e.stopPropagation();
  3023.                 removeFavorite(fav.id);
  3024.               });
  3025.               
  3026.               overlay.append(btn);
  3027.               item.append(img).append(overlay);
  3028.               $("#favorites-grid").append(item);
  3029.             });
  3030.             
  3031.             $("#favorites-counter").text(data.data.length);
  3032.             var percentage = (data.data.length / 10) * 100;
  3033.             $("#favorites-progress").css("width", percentage + "%");
  3034.             
  3035.           } else {
  3036.             $("#favorites-empty-state").show();
  3037.             $("#favorites-counter").text("0");
  3038.             $("#favorites-progress").css("width", "0%");
  3039.           }
  3040.         },
  3041.         error: function() {
  3042.           $("#favorites-grid").html("<div style='color:red;text-align:center'>Erreur de chargement</div>");
  3043.         }
  3044.       });
  3045.     }
  3046.     
  3047.     // Supprimer un favori
  3048.     function removeFavorite(id) {
  3049.       $.ajax({
  3050.         url: "/Parent/remove-favorite/" + id,
  3051.         type: "POST",
  3052.         success: function() {
  3053.           loadFavorites();
  3054.           
  3055.           // Mettre à jour le compteur global
  3056.           var count = parseInt($("#likeCount").text());
  3057.           if (!isNaN(count)) {
  3058.             $("#likeCount").text(count - 1);
  3059.           }
  3060.           
  3061.           var countFav = parseInt($("#mesFavCount").text());
  3062.           if (!isNaN(countFav)) {
  3063.             $("#mesFavCount").text(countFav - 1);
  3064.           }
  3065.         },
  3066.         error: function() {
  3067.           alert("Erreur lors de la suppression du favori");
  3068.         }
  3069.       });
  3070.     }
  3071.   });
  3072. </script>
  3073. <!-- Script pour la sidebar des favoris -->
  3074. <script>
  3075. $(document).ready(function() {
  3076.     // Fonctions pour ouvrir/fermer la sidebar
  3077.     $("#openFavoritesSidebar").click(function() {
  3078.         $("#favorites-sidebar").css("right", "0");
  3079.         loadFavorites();
  3080.     });
  3081.     
  3082.     $("#close-favorites-btn").click(function() {
  3083.         $("#favorites-sidebar").css("right", "-400px");
  3084.     });
  3085.     
  3086.     // Fermer en cliquant en dehors
  3087.     $(document).click(function(event) {
  3088.         if (!$(event.target).closest("#favorites-sidebar").length && 
  3089.             !$(event.target).closest("#openFavoritesSidebar").length && 
  3090.             $("#favorites-sidebar").css("right") === "0px") {
  3091.             $("#favorites-sidebar").css("right", "-400px");
  3092.         }
  3093.     });
  3094.     
  3095.    // Variables globales
  3096. let selectedFavorites = [];
  3097. let allFavorites = [];
  3098. let coverPhotoId = null; // ID de la photo de couverture
  3100. // Fonction pour mettre à jour la sidebar
  3101. function loadFavorites() {
  3102.     $("#favorites-grid").html("<div style='text-align:center;padding:20px;'>Chargement...</div>");
  3103.     
  3104.     $.ajax({
  3105.         url: "/Parent/mes-favoris",
  3106.         type: "GET",
  3107.         dataType: "json",
  3108.         success: function(data) {
  3109.             $("#favorites-grid").empty();
  3110.             allFavorites = data.data || [];
  3111.             
  3112.             if (allFavorites.length > 0) {
  3113.                 $("#favorites-empty-state").hide();
  3114.                 
  3115.                 // Ajouter l'option de photo de couverture au-dessus de la grille
  3116.                 if (!$("#cover-photo-section").length) {
  3117.                     const coverSection = $(`
  3118.                         <div id="cover-photo-section" style="margin-bottom:15px;">
  3119.                             <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
  3120.                                 <h4 style="margin:0;font-size:15px;color:#333;">Photo de couverture</h4>
  3121.                                 <span style="font-size:12px;color:#777;">Pour la personnalisation des produits</span>
  3122.                             </div>
  3123.                             <div id="cover-photo-container" style="height:120px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;border:1px dashed #ccc;">
  3124.                                 <div id="cover-photo-placeholder" style="text-align:center;padding:15px;color:#777;">
  3125.                                     <i class="bi bi-image" style="font-size:24px;display:block;margin-bottom:8px;"></i>
  3126.                                     <p style="margin:0;font-size:13px;">Sélectionnez une photo comme couverture</p>
  3127.                                 </div>
  3128.                                 <div id="cover-photo-preview" style="display:none;width:100%;height:100%;position:relative;">
  3129.                                     <img src="" style="width:100%;height:100%;object-fit:cover;" />
  3130.                                     <button id="remove-cover-photo" style="position:absolute;top:5px;right:5px;background:#F56040;color:white;border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;">
  3131.                                         <i class="bi bi-x"></i>
  3132.                                     </button>
  3133.                                 </div>
  3134.                             </div>
  3135.                         </div>
  3136.                     `);
  3137.                     
  3138.                     $("#photos-content").prepend(coverSection);
  3139.                     
  3140.                     // Événement pour retirer la photo de couverture
  3141.                     $("#remove-cover-photo").click(function(e) {
  3142.                         e.stopPropagation();
  3143.                         setCoverPhoto(null);
  3144.                     });
  3145.                 }
  3146.                 
  3147.                 // Mettre à jour l'affichage de la photo de couverture
  3148.                 updateCoverPhotoDisplay();
  3149.                 
  3150.                 // Générer la grille de photos
  3151.                 $.each(allFavorites, function(i, fav) {
  3152.                     var isSelected = selectedFavorites.includes(fav.id);
  3153.                     var isCoverPhoto = (coverPhotoId === fav.id);
  3154.                     
  3155.                     // Conteneur principal avec styles conditionnels
  3156.                     var item = $("<div class='favorite-item' data-id='" + fav.id + "' style='position:relative;border-radius:8px;overflow:hidden;aspect-ratio:1;cursor:pointer;transition:all 0.2s;border:3px solid " + (isSelected ? "#F56040" : (isCoverPhoto ? "#4CAF50" : "transparent")) + ";'></div>");
  3157.                     
  3158.                     var img = $("<img style='width:100%;height:100%;object-fit:cover;'>").attr("src", fav.path).attr("alt", fav.descreption || "Photo favorite");
  3159.                     
  3160.                     // Badge de sélection
  3161.                     var selectionBadge = $("<div class='selection-badge' style='position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:#F56040;display:" + (isSelected ? "flex" : "none") + ";align-items:center;justify-content:center;color:white;font-size:12px;z-index:10;'><i class='bi bi-check'></i></div>");
  3162.                     
  3163.                     // Badge de photo de couverture
  3164.                     var coverBadge = $("<div class='cover-badge' style='position:absolute;top:5px;left:5px;padding:2px 6px;background:#4CAF50;color:white;font-size:10px;border-radius:3px;display:" + (isCoverPhoto ? "block" : "none") + ";z-index:10;'><i class='bi bi-star-fill' style='margin-right:3px;font-size:8px;'></i>Couverture</div>");
  3165.                     
  3166.                     // Overlay simple pour effet au survol
  3167.                     var hoverOverlay = $("<div class='hover-overlay' style='position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.2);opacity:0;transition:opacity 0.2s;z-index:5;'></div>");
  3168.                     
  3169.                     // Actions sur hover
  3170.                     var actionsOverlay = $("<div class='actions-overlay' style='position:absolute;bottom:5px;left:5px;right:5px;display:flex;justify-content:center;gap:8px;opacity:0;transition:opacity 0.2s;z-index:15;'></div>");
  3171.                     
  3172.                     // Bouton pour définir comme photo de couverture
  3173.                     var setCoverBtn = $("<button style='background:" + (isCoverPhoto ? "#4CAF50" : "rgba(255,255,255,0.8)") + ";color:" + (isCoverPhoto ? "white" : "#333") + ";border:none;border-radius:3px;font-size:11px;padding:5px 8px;cursor:pointer;'><i class='bi bi-star" + (isCoverPhoto ? "-fill" : "") + "' style='margin-right:3px;'></i>Couverture</button>");
  3174.                     
  3175.                     setCoverBtn.click(function(e) {
  3176.                         e.stopPropagation();
  3177.                         if (isCoverPhoto) {
  3178.                             setCoverPhoto(null);
  3179.                         } else {
  3180.                             setCoverPhoto(fav.id);
  3181.                         }
  3182.                     });
  3183.                     
  3184.                     actionsOverlay.append(setCoverBtn);
  3185.                     
  3186.                     // Ajouter effet de survol
  3187.                     item.hover(
  3188.                         function() { 
  3189.                             $(this).find(".hover-overlay").css("opacity", "1");
  3190.                             $(this).find(".actions-overlay").css("opacity", "1");
  3191.                         },
  3192.                         function() { 
  3193.                             $(this).find(".hover-overlay").css("opacity", "0");
  3194.                             $(this).find(".actions-overlay").css("opacity", "0");
  3195.                         }
  3196.                     );
  3197.                     
  3198.                     // Gérer le clic pour la sélection
  3199.                     item.click(function(e) {
  3200.                         e.stopPropagation();
  3201.                         toggleSelection($(this).data('id'));
  3202.                     });
  3203.                     
  3204.                     item.append(img).append(hoverOverlay).append(selectionBadge).append(coverBadge).append(actionsOverlay);
  3205.                     
  3206.                     // Ajouter explicitement une classe pour le style
  3207.                     item.addClass("no-trash-button");
  3208.                     
  3209.                     $("#favorites-grid").append(item);
  3210.                 });
  3211.                 
  3212.                 // Supprimer tout bouton de suppression qui pourrait être ajouté dynamiquement
  3213.                 setTimeout(function() {
  3214.                     $(".favorite-item .remove-favorite, .favorite-item button:has(.bi-trash), .favorite-overlay button").remove();
  3215.                 }, 100);
  3216.                 
  3217.                 $("#favorites-counter").text(allFavorites.length);
  3218.                 $("#openFavoritesSidebar span").text(allFavorites.length);
  3219.                 updateProductsView();
  3220.                 
  3221.             } else {
  3222.                 $("#favorites-empty-state").show();
  3223.                 $("#favorites-counter").text("0");
  3224.                 $("#openFavoritesSidebar span").text("0");
  3225.                 $("#selection-count").text("0");
  3226.                 updateProductsView();
  3227.             }
  3228.         },
  3229.         error: function() {
  3230.             $("#favorites-grid").html("<div style='color:red;text-align:center;padding:20px;'>Erreur de chargement</div>");
  3231.         }
  3232.     });
  3233. }
  3235. // Fonction pour définir la photo de couverture
  3236. function setCoverPhoto(id) {
  3237.     coverPhotoId = id;
  3238.     
  3239.     // Mettre à jour l'affichage
  3240.     updateCoverPhotoDisplay();
  3241.     
  3242.     // Mettre à jour le style des photos dans la grille
  3243.     $(".favorite-item").each(function() {
  3244.         const itemId = $(this).data('id');
  3245.         const isSelected = selectedFavorites.includes(itemId);
  3246.         const isCover = (itemId === coverPhotoId);
  3247.         
  3248.         // Mettre à jour la bordure
  3249.         $(this).css("border", "3px solid " + (isSelected ? "#F56040" : (isCover ? "#4CAF50" : "transparent")));
  3250.         
  3251.         // Mettre à jour le badge de couverture
  3252.         $(this).find(".cover-badge").css("display", isCover ? "block" : "none");
  3253.         
  3254.         // Mettre à jour le bouton de couverture
  3255.         const coverBtn = $(this).find(".actions-overlay button:first");
  3256.         coverBtn.css({
  3257.             "background": isCover ? "#4CAF50" : "rgba(255,255,255,0.8)",
  3258.             "color": isCover ? "white" : "#333"
  3259.         });
  3260.         coverBtn.find("i").attr("class", "bi bi-star" + (isCover ? "-fill" : ""));
  3261.     });
  3262.     
  3263.     // Enregistrer l'ID de la photo de couverture (si nécessaire pour le backend)
  3264.     if (id) {
  3265.         console.log("Photo de couverture définie avec l'ID:", id);
  3266.         // Ici vous pouvez ajouter une requête AJAX pour enregistrer ce choix sur le serveur
  3267.         
  3268.         // Ajouter automatiquement la photo de couverture à la sélection si elle n'y est pas déjà
  3269.         if (!selectedFavorites.includes(id)) {
  3270.             toggleSelection(id);
  3271.         }
  3272.     } else {
  3273.         console.log("Photo de couverture supprimée");
  3274.     }
  3275. }
  3277. // Mettre à jour l'affichage de la photo de couverture
  3278. function updateCoverPhotoDisplay() {
  3279.     if (coverPhotoId) {
  3280.         // Trouver la photo correspondante
  3281.         const coverPhoto = allFavorites.find(fav => fav.id === coverPhotoId);
  3282.         if (coverPhoto) {
  3283.             $("#cover-photo-placeholder").hide();
  3284.             $("#cover-photo-preview").show();
  3285.             $("#cover-photo-preview img").attr("src", coverPhoto.path);
  3286.         } else {
  3287.             // Si l'ID ne correspond à aucune photo (cas rare)
  3288.             coverPhotoId = null;
  3289.             $("#cover-photo-placeholder").show();
  3290.             $("#cover-photo-preview").hide();
  3291.         }
  3292.     } else {
  3293.         $("#cover-photo-placeholder").show();
  3294.         $("#cover-photo-preview").hide();
  3295.     }
  3296. }
  3298. // Modifier la fonction updateProductsView pour tenir compte de la photo de couverture
  3299. function updateProductsView() {
  3300.     const current = selectedFavorites.length;
  3301.     const hasCoverPhoto = coverPhotoId !== null;
  3302.     
  3303.     $("#product-photo-count").text(current);
  3304.     
  3305.     let remainingForAlbum = Math.max(0, 20 - current);
  3306.     let remainingForPochette = Math.max(0, 12 - current);
  3307.     let remainingForPack = Math.max(0, 12 - current);
  3309.     const progressBar = (count, total, color) => `
  3310.         <div style="margin: 5px 0;">
  3311.             <div style="background-color: #e9ecef; border-radius: 5px; overflow: hidden; height: 8px;">
  3312.                 <div style="width: ${(count / total) * 100}%; background-color: ${color}; height: 100%;"></div>
  3313.             </div>
  3314.             <small style="font-size: 12px;">${count}/${total} photos</small>
  3315.         </div>
  3316.     `;
  3318.     // Liste des produits
  3319.     const products = [
  3320.         {
  3321.             name: "Pochette photo (12 photos)",
  3322.             required: 12,
  3323.             remaining: Math.max(0, 12 - current),
  3324.             image: "/images/produit/PochettePhoto5sur5-2.jpg",
  3325.             color: "#2196f3",
  3326.             link: "{{ path('AjoutPochettePhotos_Favoris', {'nbr': 12}) }}",
  3327.             needsCover: true
  3328.         },
  3329.         {
  3330.             name: "Pack numérique (20 photos)",
  3331.             required: 20,
  3332.             remaining: Math.max(0, 20 - current),
  3333.             image: "/images/produit/photoNumerique.jpg",
  3334.             color: "#4caf50",
  3335.             link: "{{ path('PackPhotosNumerique_Favoris', {'nbr': 20}) }}",
  3336.             needsCover: false
  3337.         },
  3338.        
  3339.       
  3340.     ].sort((a, b) => a.remaining - b.remaining);
  3342.     const productList = products
  3343.         .map((product) => {
  3344.             const count = current;
  3345.             const total = product.required;
  3346.             const remaining = product.remaining;
  3347.             const coverRequired = product.needsCover && !hasCoverPhoto;
  3349.             return `
  3350.                 <li style="margin-bottom: 20px; position: relative;">
  3351.                     ${coverRequired ? `<div style="position: absolute; top: 0; right: 0; background: #FFC107; color: #333; font-size: 10px; padding: 2px 6px; border-radius: 3px; z-index: 5;">
  3352.                         <i class="bi bi-exclamation-triangle"></i> Photo de couverture requise
  3353.                     </div>` : ''}
  3354.                     <div style="display: flex; align-items: center; gap: 10px;">
  3355.                         <img src="${product.image}" alt="${product.name}" style="width: 70px; height: 70px; border-radius: 5px; object-fit: cover;" />
  3356.                         <div style="flex: 1;">
  3357.                             <strong style="font-size: 14px;">${product.name}</strong>
  3358.                             ${progressBar(count, total, product.color)}
  3359.                             ${
  3360.                                 remaining > 0
  3361.                                 ? `<small style="color: ${product.color}; font-size: 12px;">
  3362.                                     Encore ${remaining} photos pour compléter ${product.name.toLowerCase()}
  3363.                                 </small>`
  3364.                                 : coverRequired
  3365.                                 ? `<button
  3366.                                     style="
  3367.                                         margin-top: 5px;
  3368.                                         padding: 6px 12px;
  3369.                                         background-color: #FFC107;
  3370.                                         color: #333;
  3371.                                         border: none;
  3372.                                         border-radius: 5px;
  3373.                                         font-size: 13px;
  3374.                                         cursor: pointer;
  3375.                                     "
  3376.                                     onclick="$('#tab-photos').click(); /* Rediriger vers l'onglet photos */"
  3377.                                 >
  3378.                                     Choisir une couverture
  3379.                                 </button>`
  3380.                                 : `<button
  3381.                                     style="
  3382.                                         margin-top: 5px;
  3383.                                         padding: 6px 12px;
  3384.                                         background-color: ${product.color};
  3385.                                         color: white;
  3386.                                         border: none;
  3387.                                         border-radius: 5px;
  3388.                                         font-size: 13px;
  3389.                                         cursor: pointer;
  3390.                                     "
  3391.                                     onclick="window.location.href='${product.link}'"
  3392.                                 >
  3393.                                     Commander
  3394.                                 </button>`
  3395.                             }
  3396.                         </div>
  3397.                     </div>
  3398.                 </li>
  3399.             `;
  3400.         })
  3401.         .join("");
  3403.     const boutiqueButton = `
  3404.         <li style="margin-top: 25px; text-align: center;">
  3405.             <button
  3406.                 style="
  3407.                     padding: 8px 15px;
  3408.                     background-color: #F56040;
  3409.                     color: white;
  3410.                     border: none;
  3411.                     border-radius: 5px;
  3412.                     font-size: 14px;
  3413.                     width: 170px;
  3414.                     height: 40px;
  3415.                     cursor: pointer;
  3416.                 "
  3417.                 onclick="window.location.href='{{ path('boutique5sur5') }}'"
  3418.             >
  3419.                 Voir toute la boutique
  3420.             </button>
  3421.         </li>
  3422.     `;
  3424.     $("#product-list").html(productList + boutiqueButton);
  3425. }
  3426. });
  3427. </script>
  3428. {% endblock %}