@extends('layouts.app') 
@section('content')
<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire_edit.css') }}">
         <div class="it-hero-2-area pt-0">
            <div class="it-hero-2-overlay fix gray-bg z-index-1" data-background="data:image/jpeg;base64,{{ base64_encode($auberges->image) }}">
               <div class="container">
                  <div class="row align-items-center">
                     <div class="col-xl-6 col-lg-6">
                        <div class="it-hero-2-content">
                           <h4 class="it-hero-3-subtitle it-split-in-right"><span>{{ __('site.republic') }}</span></h4>                             
							      <h1 class="it-hero-2-title it-split-in-right"> {{ __('site.ministry_name') }} </h1>
							      <h4 class="it-hero-2-subtitle it-split-in-right" style="color:#fff;"> {{ trans_field($auberges, 'nom') }} </h4>
                           <div class="it-hero-2-text  wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                              <p class="mb-30"><br/></p>
                           </div>
                           <div class="it-hero-btn d-sm-flex align-items-center">
                              <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay=".8">
                                 @auth
                                    <a href="{{ route('reservation.create', $auberges->id) }}" 
                                       class="it-btn-orange mr-30 wow itfadeUp" 
                                       data-wow-duration=".9s" data-wow-delay=".7s">
                                          <span>
                                             <span class="text-1">{{ __('site.book_now') }}</span>
                                             <span class="text-2">{{ __('site.book_now') }}</span>
                                          </span>
                                          <i>
                                             <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                             </svg>
                                             <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                             </svg>
                                          </i>
                                    </a>
                                 @endauth
<input type="hidden" name="redirectTo" value="{{ request('redirectTo') }}">
                                 @guest
                                    <a href="{{ route('login') }}?redirectTo={{ route('reservation.create', $auberges->id) }}" 
                                       class="it-btn-orange mr-30 wow itfadeUp" 
                                       data-wow-duration=".9s" data-wow-delay=".7s">
                                          <span>
                                             <span class="text-1">{{ __('site.login_first') }}</span>
                                             <span class="text-2">{{ __('site.login_first') }}</span>
                                          </span>
                                          <i>
                                             <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                             </svg>
                                             <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                             </svg>
                                          </i>
                                    </a>
                                 @endguest
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="it-about-2-area p-relative pt-95 pb-45">
            <div class="container">
               <div class="row align-items-center">
                  <div class="col-xl-6 col-lg-6 order-1 order-lg-0 pe-lg-5">
                     <div class="it-about-2-thumb p-relative">
                        <img src="data:image/jpeg;base64,{{ base64_encode($auberges->image) }}" alt="{{ trans_field($auberges,'nom') }}" class="img-fluid">
                     </div>
                  </div>
                  <div class="col-xl-6 col-lg-6 order-0 order-lg-1 ps-lg-5">
                     <div class="it-about-2-right">
                        <div class="it-section-title-box mb-20">
                           <span class="it-section-subtitle">{{ __('site.about_center') }}</span>
                           <h4 class="it-section-title it-split-in-right mb-0"> {{ trans_field($auberges,'nom') }} </h4>
                        </div>
                        <div class="it-about-2-text">
                           <p class="mb-30"> {!! trans_field($auberges,'description') !!} </p>
                        </div>
                        <div class="row">
                           <div class="col-md-6">
                              <div class="room-content">
                                 <h4 class="room-title"> <a href="portfolio-details.html">{{ __('site.services_title') }}</a> </h4>
                                 
                                 <div class="room-meta">
                                    @if($auberges->nb_chambres > 0)
                                       <span><i class="fas fa-bed"></i> {{ $auberges->nb_chambres }} {{ __('site.beds_label') }}</span>
                                    @endif
                                    @if($auberges->capacite_tentes > 0)
                                       <span><i class="fas fa-campground"></i> {{ $auberges->capacite_tentes }} {{ __('site.tents_label') }}</span>
                                    @endif
                                 </div>
                                 @if($auberges->services_auberge->isNotEmpty())
                                    @foreach($auberges->services_auberge as $service)
                                       <div class="feature">
                                       <i class="fas fa-check"></i>
                                       <span>{{ trans_field($service,'nom') }}</span>
                                       </div>
                                    @endforeach
                                 @else
                                    <div class="feature">
                                       <span>-</span>
                                    </div>
                                 @endif
                                 <h4 class="room-title"> <a href="#"> 
                                 {{ __('site.available_spaces_title') }}
                                 </a> </h4>
                                 <div class="features-list">
                                       @if($auberges->espaces->isNotEmpty())
                                          @foreach($auberges->espaces as $espace)
                                             <div class="feature">
                                             <i class="fas fa-check"></i>
                                             <span>{{ $espace->nom_ar }}</span>
                                             </div>
                                          @endforeach
                                       @else
                                          <div class="feature">
                                             <span>-</span>
                                          </div>
                                       @endif
                                    </div>
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div class="room-content">
                                 <h4 class="room-title"> <a href="#">{{ __('site.sports_title') }}</a> </h4>
                                    @if($auberges->terrains->isNotEmpty())
                                    @foreach($auberges->terrains as $sport)
                                       <div class="feature">
                                       <i class="fas fa-check"></i>
                                       <span>{{ trans_field($sport,'nom') }}</span>
                                       </div>
                                    @endforeach
                                 @else
                                    <div class="feature">
                                       <span>-</span>
                                    </div>
                                 @endif

                                 <h4 class="room-title"> <a href="#"> 
                                 {{ __('site.cultural_spaces_title') }}
                                 </a> </h4>
                                      <div class="feature">
                                       <span>{{ trans_field($auberges,'lieux_culturels') }}</span>
                                       </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
            {{-- Section Visite Virtuelle 360° --}}
            @php
               // Utiliser le nom arabe car les dossiers Pannellum sont en arabe
               $aubergeName = $auberges->nom_ar ?? trans_field($auberges, 'nom');
            @endphp
            
            @if(has_virtual_tour($aubergeName))
            <section class="virtual-tour-section pt-100 pb-70" style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);">
               <div class="container">
                  <div class="row">
                     <div class="col-12 text-center mb-50">
			               <div class="it-section-title-box mb-20">
                           <span class="it-section-subtitle" style="color: #e42125;">
                              <i class="fas fa-vr-cardboard"></i> {{ __('site.virtual_tour_label') }}
                           </span>
                           <h4 class="it-section-title it-split-in-right mb-0">{{ __('site.virtual_tour_subtitle') }}</h4>
                           <p class="text-muted mt-3">
                              {{ __('site.virtual_tour_description') }}
                           </p>
                        </div>                 
                     </div>
                     <div class="col-12">
                        <div class="virtual-tour-container" 
                             style="height: 600px; 
                                    position: relative; 
                                    overflow: hidden; 
                                    border-radius: 15px; 
                                    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
                                    border: 3px solid #e42125;">
                           <iframe 
                              allowfullscreen 
                              style="position: absolute; 
                                     top: 0; 
                                     left: 0; 
                                     width: 100%; 
                                     height: 100%; 
                                     border: none;"
                              src="{{ get_virtual_tour_url($auberges) }}"
                              title="{{ __('site.virtual_tour_of') }} {{ $aubergeName }}">
                           </iframe>
                        </div>
                        
                        <div class="text-center mt-4">
                           <p class="text-muted">
                              <i class="fas fa-mouse"></i> {{ __('site.virtual_tour_controls') }}
                           </p>
                           <p class="text-muted small">
                              <i class="fas fa-images"></i> 
                              {{ count_virtual_tour_images($aubergeName) }} {{ __('site.panoramic_views') }}
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
            </section>
            @endif
            <div class="it-contact-area it-contact-style-3 z-index-1 pt-45 pb-45" style="background:white;">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-xl-12 col-lg-12">
                        <div class="it-contact-center">
                           <center><div class="it-section-title-box mb-10">
                              <span class="it-section-subtitle">{{ __('site.contact_subtitle') }}</span>
                              <h4 class="it-section-title mb-0">{{ __('site.contact_description') }}</h4>
                           </div></center>
                           <div class="it-contact-list-wrap">
                              <div class="row">
                                 <div class="col-md-6 pt-120">
                                    <div class="it-contact-list-box d-flex align-items-center mb-30">
                                       <div class="it-contact-list-icon">
                                          <span>
                                             <svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M24.3759 1.87409C24.3759 1.37681 24.5735 0.899894 24.9251 0.548263C25.2768 0.196632 25.7537 -0.000911936 26.2509 -0.000911936C31.2221 0.00454731 35.988 1.98174 39.5032 5.49687C43.0183 9.01199 44.9955 13.778 45.0009 18.7491C45.0009 19.2464 44.8034 19.7233 44.4518 20.0749C44.1001 20.4265 43.6232 20.6241 43.1259 20.6241C42.6287 20.6241 42.1517 20.4265 41.8001 20.0749C41.4485 19.7233 41.2509 19.2464 41.2509 18.7491C41.2465 14.7722 39.6647 10.9595 36.8526 8.14742C34.0405 5.33534 30.2278 3.75355 26.2509 3.74909C25.7537 3.74909 25.2768 3.55154 24.9251 3.19991C24.5735 2.84828 24.3759 2.37137 24.3759 1.87409ZM26.2509 11.2491C28.2401 11.2491 30.1477 12.0393 31.5542 13.4458C32.9608 14.8523 33.7509 16.76 33.7509 18.7491C33.7509 19.2464 33.9485 19.7233 34.3001 20.0749C34.6517 20.4265 35.1287 20.6241 35.6259 20.6241C36.1232 20.6241 36.6001 20.4265 36.9518 20.0749C37.3034 19.7233 37.5009 19.2464 37.5009 18.7491C37.498 15.7663 36.3117 12.9066 34.2026 10.7974C32.0935 8.68829 29.2337 7.50207 26.2509 7.49909C25.7537 7.49909 25.2768 7.69663 24.9251 8.04826C24.5735 8.39989 24.3759 8.87681 24.3759 9.37409C24.3759 9.87137 24.5735 10.3483 24.9251 10.6999C25.2768 11.0515 25.7537 11.2491 26.2509 11.2491ZM43.3003 31.3847C44.3869 32.4743 44.9971 33.9503 44.9971 35.4891C44.9971 37.0279 44.3869 38.5039 43.3003 39.5935L41.5941 41.5603C26.2378 56.2622 -11.1309 18.9028 3.34407 3.49784L5.50032 1.62284C6.59114 0.566608 8.05395 -0.0176949 9.57227 -0.00365911C11.0906 0.0103767 12.5423 0.621623 13.6134 1.69784C13.6716 1.75596 17.1459 6.26909 17.1459 6.26909C18.1769 7.35214 18.7508 8.79083 18.7483 10.2861C18.7459 11.7814 18.1673 13.2182 17.1328 14.2978L14.9616 17.0278C16.1632 19.9474 17.9298 22.6008 20.16 24.8355C22.3902 27.0702 25.04 28.8422 27.9572 30.0497L30.7041 27.8653C31.7839 26.8317 33.2204 26.2538 34.7153 26.2517C36.2101 26.2496 37.6482 26.8235 38.7309 27.8541C38.7309 27.8541 43.2422 31.3266 43.3003 31.3847ZM40.7203 34.111C40.7203 34.111 36.2334 30.6591 36.1753 30.601C35.789 30.218 35.2671 30.0031 34.7231 30.0031C34.1792 30.0031 33.6572 30.218 33.2709 30.601C33.2203 30.6535 29.4384 33.6666 29.4384 33.6666C29.1836 33.8694 28.8803 34.0024 28.5584 34.0524C28.2365 34.1024 27.9072 34.0676 27.6028 33.9516C23.8237 32.5445 20.3911 30.3417 17.5375 27.4924C14.6839 24.643 12.4761 21.2136 11.0634 17.4366C10.9382 17.1281 10.8974 16.7918 10.9451 16.4622C10.9929 16.1327 11.1276 15.8218 11.3353 15.5616C11.3353 15.5616 14.3484 11.7778 14.3991 11.7291C14.7821 11.3428 14.997 10.8209 14.997 10.2769C14.997 9.73293 14.7821 9.21099 14.3991 8.82471C14.3409 8.76846 10.8891 4.27784 10.8891 4.27784C10.497 3.92629 9.98533 3.73802 9.45891 3.75161C8.9325 3.76521 8.43122 3.97964 8.05782 4.35096L5.90157 6.22596C-4.67718 18.946 27.7059 49.5328 38.8528 38.9991L40.5609 37.0303C40.9612 36.6596 41.2016 36.1477 41.2314 35.6029C41.2611 35.0581 41.0779 34.5231 40.7203 34.111Z"
                                                fill="#E03B3B" />
                                             </svg>
                                          </span>
                                       </div>
                                       <div class="it-contact-list">
                                          <span>{{ __('site.call_center') }}</span>
                                          <p>{{ __('site.call_center_desc') }}</p>
                                          <a class="border-line-orange" href="tel:+21697218046">
                                             <span dir="rtl"> {{ $auberges->contact_tel }}</span>
                                          </a>
                                       </div>
                                    </div>
		                              <div class="it-contact-list-box d-flex align-items-center mb-30">
                                       <div class="it-contact-list-icon">
                                            <span>
                                             <svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g clip-path="url(#clip0_2290_8666)">
                                                   <path d="M22.5 11.25C21.0166 11.25 19.5666 11.6899 18.3332 12.514C17.0999 13.3381 16.1386 14.5094 15.5709 15.8799C15.0032 17.2503 14.8547 18.7583 15.1441 20.2132C15.4335 21.668 16.1478 23.0044 17.1967 24.0533C18.2456 25.1022 19.582 25.8165 21.0368 26.1059C22.4917 26.3953 23.9997 26.2468 25.3701 25.6791C26.7406 25.1114 27.9119 24.1501 28.736 22.9168C29.5601 21.6834 30 20.2334 30 18.75C30 16.7609 29.2098 14.8532 27.8033 13.4467C26.3968 12.0402 24.4891 11.25 22.5 11.25ZM22.5 22.5C21.7583 22.5 21.0333 22.2801 20.4166 21.868C19.7999 21.456 19.3193 20.8703 19.0355 20.1851C18.7516 19.4998 18.6774 18.7458 18.8221 18.0184C18.9668 17.291 19.3239 16.6228 19.8484 16.0984C20.3728 15.5739 21.041 15.2167 21.7684 15.0721C22.4958 14.9274 23.2498 15.0016 23.9351 15.2855C24.6203 15.5693 25.206 16.0499 25.618 16.6666C26.0301 17.2833 26.25 18.0083 26.25 18.75C26.25 19.7446 25.8549 20.6984 25.1517 21.4017C24.4484 22.1049 23.4946 22.5 22.5 22.5Z"
                                                      fill="#E03B3B" />
                                                   <path d="M22.5016 44.9998C20.9227 45.0079 19.3649 44.6376 17.9586 43.9199C16.5522 43.2023 15.3383 42.1581 14.4184 40.8748C7.27281 31.018 3.64844 23.608 3.64844 18.8492C3.64844 13.8491 5.63474 9.05369 9.17039 5.51805C12.706 1.9824 17.5014 -0.00390625 22.5016 -0.00390625C27.5017 -0.00390625 32.2971 1.9824 35.8327 5.51805C39.3684 9.05369 41.3547 13.8491 41.3547 18.8492C41.3547 23.608 37.7303 31.018 30.5847 40.8748C29.6648 42.1581 28.4509 43.2023 27.0446 43.9199C25.6382 44.6376 24.0804 45.0079 22.5016 44.9998ZM22.5016 4.08922C18.5873 4.09369 14.8347 5.65058 12.0669 8.41835C9.29918 11.1861 7.74228 14.9388 7.73781 18.853C7.73781 22.6217 11.2872 29.5911 17.7297 38.4767C18.2766 39.2301 18.9941 39.8432 19.8235 40.266C20.6529 40.6888 21.5706 40.9092 22.5016 40.9092C23.4325 40.9092 24.3502 40.6888 25.1796 40.266C26.009 39.8432 26.7265 39.2301 27.2734 38.4767C33.7159 29.5911 37.2653 22.6217 37.2653 18.853C37.2608 14.9388 35.704 11.1861 32.9362 8.41835C30.1684 5.65058 26.4158 4.09369 22.5016 4.08922Z"
                                                      fill="#E03B3B" />
                                                </g>
                                                <defs>
                                                   <clipPath id="clip0_2290_8666">
                                                      <rect width="45" height="45" fill="white" />
                                                   </clipPath>
                                                </defs>
                                             </svg>
                                          </span>
                                       </div>
                                       <div class="it-contact-list">
                                          <span>{{ __('site.our_location') }}</span>
                                          <p>{{ __('site.find_us_on_map') }}</p>
                                          <a class="border-line-orange" href="#"> {{ $auberges->adresse}} </a>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="col-md-6">
                                    <div class="it-map-area">
                                       <div class="container-fluid p-0">
                                          <div class="row">
                                             <div class="col-12">
                                                <div class="it-map-wrap">
                                                   @if($auberges->latitude && $auberges->longitude)
                                                      <div class="it-map-wrap text-center mt-4">
                                                         <iframe  width="100%" height="450" frameborder="0" style="border:0; border-radius:10px;" 
                                                            src="https://maps.google.com/maps?q={{ $auberges->nom }} {{ $auberges->latitude }},{{ $auberges->longitude }}&hl={{ app()->getLocale() }}&z=14&output=embed" 
                                                            allowfullscreen  loading="lazy"> 
                                                         </iframe>
                                                      </div>
                                                   @else
                                                      <p class="text-muted text-center">{{ __('site.location_not_specified') }}</p>
                                                   @endif
					                                 </div>
                                             </div>
                                          </div>
                                       </div>
	                                 </div>
                                 </div>
                              </div>
                           </div>
                        </div> 
                     </div>
                  </div>
               </div>            
            </div>   
            <section class="about-section pt-100 pb-70" style="background:ghostwhite;">
               <div class="container">
                  <div class="row align-items-center">
                     <div class="col-lg-6 mb-30">
                        <div class="about-content">
				               <div class="it-section-title-box mb-20">
                              <span class="it-section-subtitle">{{ __('site.about_service_title') }}</span>
                           </div>
                           <div class="it-about-2-text">
                              <p class="mb-30">
                                 <p>{!! __('site.about_text') !!}</p>
                                 <p>{{ __('site.about_we_offer') }}</p>
                                 <ul class="list-unstyled">
                                    <li><i class="fas fa-check"></i> {{ __('site.about_feature_rooms') }}</li>
                                    <li><i class="fas fa-check"></i> {{ __('site.about_feature_food') }}</li>
                                    <li><i class="fas fa-check"></i> {{ __('site.about_feature_facilities') }}</li>
                                    <li><i class="fas fa-check"></i> {{ __('site.about_feature_prices') }}</li>
                                 </ul>
					               </p>
                           </div>
                        </div>
                     </div>
                     <div class="col-lg-6 mb-30">
                        <div class="map-container" style="position: relative;">
                           <img src="{{ asset('assets/img/faq/map.jpg') }}" alt="{{ __('site.map_alt') }}" class="img-fluid" style="width: 100%; height: auto;">

                           <div id="map-points"></div>
                        </div>
                     </div>
                  </div>
               </div>
            </section> 

<!-- Bouton de réservation flottant -->
<div id="floating-book-btn" class="floating-book-button">
    @auth
        <a href="{{ route('reservation.create', $auberges->id) }}" class="floating-btn-link">
            <span class="floating-btn-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M16 2V6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M8 2V6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M3 10H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </span>
            <span class="floating-btn-text">{{ __('site.book_now') }}</span>
        </a>
    @endauth
    @guest
        <a href="{{ route('login') }}?redirectTo={{ route('reservation.create', $auberges->id) }}" class="floating-btn-link">
            <span class="floating-btn-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M16 2V6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M8 2V6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M3 10H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </span>
            <span class="floating-btn-text">{{ __('site.login_first') }}</span>
        </a>
    @endguest
</div>

<style>
    .reviews-section .card {
        border-radius: 12px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .reviews-section .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.12);
    }
    .reviews-section .rating i {
        font-size: 1.1rem;
        margin-right: 2px;
    }

    /* Bouton de réservation flottant */
    .floating-book-button {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%) translateY(100px) scale(0.9);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .floating-book-button.show {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    .floating-btn-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 28px;
        background: linear-gradient(135deg, #e42125 0%, #c51b1f 100%);
        color: white;
        text-decoration: none;
        border-radius: 50px;
        box-shadow: 0 8px 25px rgba(228, 33, 37, 0.4);
        font-weight: 600;
        font-size: 16px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .floating-btn-link::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .floating-btn-link:hover::before {
        width: 300px;
        height: 300px;
    }

    .floating-btn-link:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(228, 33, 37, 0.5);
        color: white;
    }

    .floating-btn-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        position: relative;
        z-index: 1;
    }

    .floating-btn-text {
        position: relative;
        z-index: 1;
        white-space: nowrap;
    }

    /* Animation de pulsation */
    @keyframes pulse {
        0% {
            box-shadow: 0 8px 25px rgba(228, 33, 37, 0.4);
        }
        50% {
            box-shadow: 0 8px 35px rgba(228, 33, 37, 0.6);
        }
        100% {
            box-shadow: 0 8px 25px rgba(228, 33, 37, 0.4);
        }
    }

    .floating-book-button.show .floating-btn-link {
        animation: pulse 2s infinite;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .floating-book-button {
            bottom: 90px; /* Au-dessus de la navbar mobile */
        }

        .floating-btn-link {
            padding: 14px 24px;
            font-size: 14px;
            gap: 10px;
        }

        .floating-btn-icon {
            width: 20px;
            height: 20px;
        }

        .floating-btn-icon svg {
            width: 18px;
            height: 18px;
        }
    }

    @media (max-width: 480px) {
        .floating-book-button {
            bottom: 85px; /* Au-dessus de la navbar mobile */
        }

        .floating-btn-link {
            padding: 12px 20px;
            font-size: 13px;
            gap: 8px;
        }

        .floating-btn-text {
            font-size: 12px;
        }
    }
    
</style>
<script>
function editAvis(id) {
    document.getElementById('avis-text-' + id).style.display = 'none';
    document.getElementById('avis-form-' + id).style.display = 'block';
}

function cancelEdit(id) {
    document.getElementById('avis-form-' + id).style.display = 'none';
    document.getElementById('avis-text-' + id).style.display = 'block';
}

// Gestion du bouton de réservation flottant
(function() {
    const floatingBtn = document.getElementById('floating-book-btn');
    const heroSection = document.querySelector('.it-hero-2-area');
    let heroHeight = 0;

    // Calculer la hauteur de la section hero
    if (heroSection) {
        heroHeight = heroSection.offsetHeight;
    }

    // Fonction pour afficher/masquer le bouton selon le scroll
    function handleScroll() {
        const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
        
        // Afficher le bouton après avoir scrollé au-delà de la section hero (environ 80% de sa hauteur)
        if (scrollPosition > heroHeight * 0.8) {
            floatingBtn.classList.add('show');
        } else {
            floatingBtn.classList.remove('show');
        }
    }

    // Écouter l'événement de scroll avec throttle pour optimiser les performances
    let ticking = false;
    window.addEventListener('scroll', function() {
        if (!ticking) {
            window.requestAnimationFrame(function() {
                handleScroll();
                ticking = false;
            });
            ticking = true;
        }
    });

    // Vérifier la position au chargement de la page
    handleScroll();
})();
</script>


@endsection