@extends('layouts.app')

@section('content')


            <div class="it-hero-3-area pt-0">
                <div class="swiper hero-slider">
                   <div class="swiper-wrapper">
                     <div class="swiper-slide" >
                        <div class="it-hero-2-overlay fix gray-bg z-index-1" style="background-image: url('assets/img/hero/1.jpg');">
                           <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;">
                                          {{ __('site.youth_centers_title') }}
                                       </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">
                                             <a href="contact.html" class="it-btn-orange mr-30 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".7s">
                                                <span>
                                                   <span class="text-1">{{ __('site.hero_contact') }}</span>
                                                   <span class="text-2">{{ __('site.hero_contact') }}</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>
                                                </i>
                                             </a>
                                          </div>
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay="1">
                                             <a href="service.html" class="it-btn-border wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".9s">
                                                <span>
                                                   <span class="text-1">{{ __('site.news_more_button') }}</span>
                                                   <span class="text-2">{{ __('site.news_more_button') }}</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>
                                                </i>
                                             </a>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <!-- commented booking form (kept as-is, only text replaced if present) -->
                              </div>
                           </div>
                        </div>
                     </div>
                     <!-- Slide 2 -->
                     <div class="swiper-slide">
                        <div class="it-hero-2-overlay fix gray-bg z-index-1" style="background-image: url('assets/img/hero/3.jpg');">
                           <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;">
                                         {{ __('site.youth_centers_title') }}
                                       </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">
                                             <a href="contact.html" class="it-btn-orange mr-30 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".7s">
                                                <span>
                                                   <span class="text-1">{{ __('site.hero_contact') }}</span>
                                                   <span class="text-2">{{ __('site.hero_contact') }}</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>
                                                </i>
                                             </a>
                                          </div>
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay="1">
                                             <a href="service.html" class="it-btn-border wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".9s">
                                                <span>
                                                   <span class="text-1">{{ __('site.news_more_button') }}</span>
                                                   <span class="text-2">{{ __('site.news_more_button') }}</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>
                                                </i>
                                             </a>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <!-- commented booking form -->
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="swiper-slide">
                        <div class="it-hero-2-overlay fix gray-bg z-index-1" style="background-image: url('assets/img/hero/2.jpg');">
                           <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;">
                                         {{ __('site.youth_centers_title') }}
                                       </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">
                                             <a href="contact.html" class="it-btn-orange mr-30 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".7s">
                                                <span>
                                                   <span class="text-1">{{ __('site.hero_contact') }}</span>
                                                   <span class="text-2">{{ __('site.hero_contact') }}</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>
                                                </i>
                                             </a>
                                          </div>
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay="1">
                                             <a href="service.html" class="it-btn-border wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".9s">
                                                <span>
                                                   <span class="text-1">{{ __('site.news_more_button') }}</span>
                                                   <span class="text-2">{{ __('site.news_more_button') }}</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>
                                                </i>
                                             </a>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <!-- commented booking form -->
                              </div>
                           </div>
                        </div>
                     </div>
                                
				</div>
                  <!-- Add Pagination -->
                  <!--div class="swiper-pagination"></div-->
                  <!-- Add Navigation -->
                  <div class="swiper-button-next"></div>
                  <div class="swiper-button-prev"></div>
               </div>
            </div>
            <!-- hero-area-end -->
    
    
			
      <!-- virtual tour section -->
    <section class="virtual-tour-section pt-100 pb-0">    
      <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">{{ __('site.youth_centers_title') }}</span>                    
                  <h4 class="it-section-title it-split-in-right mb-0">{{ __('site.discover_bookings') }}</h4>                
               </div>            </div>        </div>        <div class="it-project-2-area z-index-1 pb-10 pt-15">            
                  <div class="container">         
                            <div class="row gx-35">                 
                                 @foreach($gouvernorats as $gouv)    
                                                 <div class="col-md-4">  
                                                                        
                                                 <div class="it-project-2-item mb-30">  
                                                                           
                                                 <div class="it-project-2-thumb fix it-img-anim-wrap p-relative">                                
                                                   
                                                 <div class="it-about-thumb it-img-anim" data-displacement="assets/img/webgl/pattern-1.jpg" 
                                                       
                                                 data-intensity="0.6" data-speedin="1" data-speedout="1">
                                                                                     
                                                 <img class="w-100"  src="data:image/jpeg;base64,{{ base64_encode($gouv->image_gouv) }}"  alt="{{ trans_field($gouv->gouvernorat,'nom') ?? '' }}">                                
                                                </div>                                                           
                                             </div>                            
                                                <div class="it-project-2-content d-flex justify-content-between align-items-center">                               
                                                    <div>                                    
                                                      <h4 class="it-project-2-title">                                        
                                                      <a href="{{ route('detail_gouver', $gouv->id_gouv) }}" class="border-line-black">
                                                         
                                                      {{ trans_field($gouv->gouvernorat,'nom') ?? '' }}                                        
                                                   </a>                                    </h4>                                
                                                </div>                                <div class="it-project-arrow">

                                                   <a href="{{ route('detail_gouver', $gouv->id_gouv) }}">                                        
                                                      <svg width="13" height="14" viewBox="0 0 13 14" fill="none"                                             
                                                      xmlns="http://www.w3.org/2000/svg">                                            
                                                      <path d="M11.103 0.952468C11.03 0.405028 10.527 0.0204122 9.97959 0.0934039L1.05854 1.28288C0.511097 1.35587 0.126481 1.85883 0.199473 2.40627C0.272465 2.95371 0.775425 3.33833 1.32287 3.26533L9.25269 2.20802L10.31 10.1378C10.383 10.6853 10.8859 11.0699 11.4334 10.9969C11.9808 10.9239 12.3654 10.421 12.2925 9.87352L11.103 0.952468ZM1.79436 13.6075L10.9061 1.69208L9.31739 0.477182L0.205642 12.3925L1.79436 13.6075Z" fill="white"/>                                        
                                                   </svg>                                    </a>                                
                                                </div>                            </div>                        
                                             </div>                    </div>                    
                                             @endforeach                </div>                
                                             <div class="row">                    <div class="col-12">                        
                                                <div class="it-pagination text-center mt-50">                            
                                                   {{ $gouvernorats->links() }}                        
                                                </div>                    </div>                
                                             </div>            </div>        </div>    </div>
                                          </section>
  

      <!-- about us section -->
            <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">
                     {!! __('site.about_text') !!}
                     <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 hover-overlay" style="position: relative; overflow: hidden;">
                  <img src="assets/img/faq/map.jpg" 
                     alt="{{ __('site.map_alt') }}" 
                     class="img-fluid" 
                     style="width: 100%; height: auto;">
                  <div class="overlay"></div>
                  <div id="map-points"></div>
               </div>
            </div>

            </div>
         </div>
      </section>
   
@endsection