@extends('layouts.app')
@section('content')

<div id="preloader">
    <div class="preloader">
        <span></span>
        <span></span>
    </div>
</div>

<div id="magic-cursor">
    <div id="ball"></div>
</div>
 




    <main>





        <div class="it-hero-2-area">
            <div class="slider">
               @foreach($sliders as $index => $slider)
               <div class="slide {{ $index == 0 ? 'active' : '' }}">
                  <div class="it-hero-2-overlay fix gray-bg z-index-1" 
                     data-background="{{ asset('uploads/' . $slider->image) }}">
                     <div class="container">
                        <div class="row align-items-center">
                           <!-- Texte -->
                           <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>{{ $slider->{'soustitre_'.app()->getLocale()} ?? $slider->soustitre_ar }}</span>
</h4>
<h1 class="it-hero-2-title it-split-in-right">
  {{ $slider->{'titre_'.app()->getLocale()} ?? $slider->titre_ar }}
</h1>


                                 <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">
                                    <!-- Bouton 1 -->
                                    @if($slider->titre_bouton_ar && $slider->lien_bouton_ar)
                                    <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay=".8">
                                       <a href="{{ $slider->lien_bouton_ar }}" 
                                          class="it-btn-orange mr-30 wow itfadeUp" 
                                          data-wow-duration=".9s" data-wow-delay=".7s">
                                          <span>
                                                <span class="text-1">{{ $slider->{'titre_bouton_'.app()->getLocale()} ?? $slider->titre_bouton_ar}}</span>
                                             <span class="text-2">{{ $slider->{'titre_bouton_'.app()->getLocale()} ?? $slider->titre_bouton_ar}}</span>
                                         
                                          </span>
                                          <i>
                                             <svg width="12" height="13" viewBox="0 0 12 13" fill="none">
                                                <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>
                                    @endif

                                    <!-- Bouton 2 -->
                                    @if($slider->titre_bouton2_ar && $slider->lien_bouton2_ar)
                                    <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay="1">
                                       <a href="{{ $slider->lien_bouton2_ar }}" 
                                          class="it-btn-border wow itfadeUp" 
                                          data-wow-duration=".9s" data-wow-delay=".9s">
                                          <span>
                                             <span class="text-1">{{ $slider->{'titre_bouton2_'.app()->getLocale()} ?? $slider->titre_bouton2_ar}}</span>
                                             <span class="text-2">{{ $slider->{'titre_bouton2_'.app()->getLocale()} ?? $slider->titre_bouton2_ar}}</span>
                                          </span>
                                          <i>
                                             <svg width="12" height="13" viewBox="0 0 12 13" fill="none">
                                                <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>
                                    @endif
                                 </div>
                              </div>
                           </div>

                           <!-- Formulaire -->
                           <div class="col-xl-6 col-lg-6">
                              <div class="it-contact-form-box z-index-1 p-relative wow img-anim-top" 
                                 data-wow-duration="1.5s" data-wow-delay="0.1">
                                 <h4 class="it-contact-form-title mb-10" style="color:#FFFFFF;">{{ __('site.search_title') }}</h4>
                                 <form action="{{ route('search') }}">
                                    <div class="it-contact-input-wrap">
                                       <div class="row gx-30">
                                          <div class="col-sm-12 mb-20">
                                             <div class="it-contact-input-box">
                                              <input class="ph" type="text" name="q" placeholder="{{ __('site.search_placeholder') }}" style="color:#FFFFFF;">
                                             </div>
                                          </div>
                                       </div>
                                       <div class="it-contact-btn">
                                          <button type="submit" class="it-btn-orange">
                                             <span>
                                                  <span class="text-1">{{ __('site.search_button') }}</span>
                                                  <span class="text-2">{{ __('site.search_button') }}</span>
                                             </span>
                                             <i>
                                                <svg width="12" height="13" viewBox="0 0 12 13" fill="none">
                                                   <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white"/>
                                                </svg>
                                             </i>
                                          </button>
                                       </div>
                                    </div>
                                 </form>
                                 <img class="it-contact-shape-1" src="assets/img/shape/contact-1-1.png" alt="">
                              </div>
                           </div>


                        </div>
                     </div>
                  </div>
               </div>
               @endforeach
            </div>
         </div>


 
    <div class="it-about-2-area p-relative pt-95 pb-45">
        <img class="it-about-2-shape-1" src="assets/img/shape/about-2-1.png" alt="">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-6 col-lg-6 order-1 order-lg-0">
                    <div class="it-about-2-thumb p-relative">
                        <img src="assets/img/about/ministere.jpg" alt="">
                    </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 order-0 order-lg-1">
                        <div class="it-about-2-right">
                           <div class="it-section-title-box mb-20">
                           <span class="it-section-subtitle">{{ __('site.about_subtitle') }}</span>
<h4 class="it-section-title it-split-in-right mb-0">{{ __('site.about_title') }}</h4>

                           </div>
                            <div class="it-about-2-text">
                                 <p class="mb-30">{!! __('site.about_text') !!}</p>
                            </div>
                            <div class="row">
                                <div class="col-xxl-6 col-xl-7 col-lg-6 col-md-6">
                                 
                                    <div class="it-about-2-btn">
                                        <a href="contact.html" class="it-btn-orange">
                                            <span>
            <span class="text-1">{{ __('site.about_read_more') }}</span>
            <span class="text-2">{{ __('site.about_read_more') }}</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>
                                    </div>
                                </div>
                            </div>


                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="it-blog-area pt-45 pb-45"  style="background:ghostwhite;">
            <div class="container">
                <div class="it-blog-top-wrap pb-65">
                    <div class="row align-items-end">
                        <div class="col-xl-5 col-lg-6">
                            <div class="it-section-title-box">
                           <span class="it-section-subtitle">{{ __('site.news_subtitle') }}</span>
<h4 class="it-section-title mb-0 it-split-in-right">{{ __('site.news_title') }}</h4>
                           </div>
                        </div>
                        <div class="col-xl-7 col-lg-6">
                           <div class="it-blog-top-right d-flex justify-content-lg-end wow itfadeUp"
                              data-wow-duration=".9s" data-wow-delay=".3s">
                                <div>
                                
                                    <div class="it-blog-btn">
                                       <a href="{{ route('news.index') }}" class="it-btn-orange">
        <span>
            <span class="text-1">{{ __('site.news_more') }}</span>
            <span class="text-2">{{ __('site.news_more') }}</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>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                  @php
                     // helper inline pour extraire ID youtube (supporte youtube.com/watch?v=ID et youtu.be/ID)
                     function youtube_id($url) {
                        if (!$url) return null;
                        if (preg_match('/(?:youtu\.be\/|v=|embed\/)([A-Za-z0-9_\-]+)/', $url, $m)) {
                              return $m[1];
                        }
                        return null;
                     }
                  @endphp

                  <div class="row gx-35">
                     @forelse($news->chunk(2) as $chunk)
                        @foreach($chunk as $item)
                              @php
                                 $dateSource = $item->date ?? $item->created_at;
                                 $date = \Carbon\Carbon::parse($dateSource)->format('Y.m.d');

                                 $youtubeId = youtube_id($item->youtube_url);
                              @endphp

                              <div class="col-xl-6 col-lg-6 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".3s">
                                 <div class="it-blog-item white-bg mb-35">
                                    <div class="row gx-0">
                                          <div class="col-md-6">
                                             <div class="it-blog-thumb" style="position: relative;">
                                                <a href="">
                                                      @if($youtubeId)
                                                         {{-- 🎥 Afficher la vidéo YouTube --}}
                                                         <div class="video-container">
                                                            <iframe 
                                                                  src="https://www.youtube.com/embed/{{ $youtubeId }}" 
                                                                  title="{{ $item->title }}" 
                                                                  frameborder="0" 
                                                                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                                                  allowfullscreen>
                                                            </iframe>
                                                         </div>
                                                      @elseif(!empty($item->image) && file_exists(public_path('uploads/'.$item->image)))
                                                                                          <img class="w-100 rounded" src="{{ asset('uploads/'.$item->image) }}" alt="{{ trans_field($item, 'title') ?? trans_field($item, 'titre') }}">

                                                      <img class="w-100 rounded" src="{{ asset('uploads/'.$item->image) }}" alt="{{ trans_field($item, 'title') ?? trans_field($item, 'titre') }}">
                                                   @else
                                                         <img class="w-100 rounded" src="{{ asset('storage/news/default.png') }}" alt="{{ trans_field($item, 'title') ?? trans_field($item, 'titre') }}">
                                                      @endif
                                                </a>
                                             </div>
                                          </div>

                                          <div class="col-md-6">
                                             <div class="it-blog-content d-md-flex justify-content-center align-items-center">
                                                <div>
                                                      <div class="it-blog-meta mb-30">
                                                         <span>
                                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                                                  <path d="M0.468788 13.1562H2.81253V14.5625C2.81253 14.8213 3.02241 15.0312 3.28128 15.0312H15.5313C15.7901 15.0312 16 14.8213 16 14.5625V2.375C16 2.11612 15.7901 1.90625 15.5313 1.90625H13.1875V1.4375C13.1875 1.17862 12.9776 0.96875 12.7188 0.96875C12.4599 0.96875 12.25 1.17862 12.25 1.4375V1.90625H9.87502V1.4375C9.87502 1.17862 9.66514 0.96875 9.40627 0.96875C9.1474 0.96875 8.93752 1.17862 8.93752 1.4375V1.90625H6.59378V1.4375C6.59378 1.17862 6.3839 0.96875 6.12503 0.96875C5.86615 0.96875 5.65628 1.17862 5.65628 1.4375V1.90625H3.28128C3.02241 1.90625 2.81253 2.11612 2.81253 2.375V5.18749C2.81253 8.64217 1.37676 11.2999 0.168695 12.3274C0.0170703 12.4537 -0.0391483 12.6615 0.0280078 12.8471C0.0952264 13.0326 0.271414 13.1562 0.468788 13.1562Z" fill="#E03B3B"/>
                                                            </svg>
                                                            {{ $date }}
                                                         </span>
                                                      </div>

                                                      <h4 class="it-blog-title mb-25">
                                                         <a class="border-line-black news-title" href="">
                                                            {{ trans_field($item, 'title') ?? trans_field($item, 'title') }}
                                                         </a>
                                                      </h4>
                                                      <p class="d-block mb-3" style="color:#555; font-size:15px;">
                                                            {{ trans_field($item, 'resume') ?? trans_field($item, 'resume') }}
                                                      </p>

                                                      <a class="it-blog-btn border-line-orange" href="{{ route('news.show', $item->slug) }}">
                                                        {{ __('site.read_more') }}
                                                         <span>
                                                            <svg width="12" height="13" viewBox="0 0 12 13" fill="none">
                                                                  <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="#E03B3B"/>
                                                            </svg>
                                                         </span>
                                                      </a>
                                                </div>
                                             </div>
                                          </div>
                                    </div>
                                 </div>
                              </div>
                        @endforeach
                     @empty
                        <div class="col-12">
                             <p>{{ __('site.no_news') }}</p>
                        </div>
                     @endforelse
                  </div>
               </div>
            </div>
 
            <div class="it-about-3-area p-relative pt-95 pb-45">
               <img class="it-about-shape-1" src="assets/img/shape/about-1-1.png" alt="">
               <div class="container">
                  <div class="row">
                     <div class="col-xl-12">
                        <div class="it-section-title-box text-center mb-65">
                        <span class="it-section-subtitle">{{ __('site.services_subtitle') }}</span>
                        <h4 class="it-section-title it-split-in-right mb-0">{{ __('site.services_title') }}</h4>
                        </div>
                     </div>
                  </div>
                  <div class="row gx-35">
                      <div class="services-container">

                   <a href="{{ route('concours.available') }}" class="service-box">
    <div class="title-icon-wrapper">
        <span class="service-icon"><i class="ri-file-list-line"></i></span>
        {{ __('site.services_competitions') }}
    </div>
    <span class="service-link">{{ __('site.services_apply_more') }}</span>
</a>

                  <a href="service-details.html" class="service-box">
    <div class="title-icon-wrapper">
        <span class="service-icon"><i class="ri-graduation-cap-line"></i></span>
        {{ __('site.services_training') }}
    </div>
    <span class="service-link">{{ __('site.services_apply_more') }}</span>
</a>

                     <a href="service-details.html" class="service-box">
                        <div class="title-icon-wrapper">
                           <span class="service-icon"><i class="ri-map-pin-line"></i></span>
                           {{ __('site.services_regional') }}
                        </div>
                            <span class="service-link">{{ __('site.services_apply_more') }}</span>
                     </a>

                     <a href="service-details.html" class="service-box">
                        <div class="title-icon-wrapper">
                           <span class="service-icon"><i class="ri-book-line"></i></span>
                            {{ __('site.services_library') }}
                        </div>
                            <span class="service-link">{{ __('site.services_apply_more') }}</span>
                     </a>

                     <a href="service-details.html" class="service-box">
                        <div class="title-icon-wrapper">
                           <span class="service-icon"><i class="ri-lightbulb-line"></i></span>
                             {{ __('site.services_projects') }}
                        </div>
                            <span class="service-link">{{ __('site.services_apply_more') }}</span>
                     </a>

                     <a href="service-details.html" class="service-box">
                        <div class="title-icon-wrapper">
                           <span class="service-icon"><i class="ri-calendar-line"></i></span>
                           {{ __('site.services_programs') }}
                        </div>
                           <span class="service-link">{{ __('site.services_apply_more') }}</span>
                     </a>

                     </div>

					  </div>
               </div>
            </div>




<div class="it-project-area it-project-style-2 z-index-1 pb-95 pt-45">
               <div class="container">
               
				   <div class="row">
                     <div class="col-xl-12">
                        <div class="it-section-title-box text-center mb-65">
                           <span class="it-section-subtitle">  {{ __('site.services_projects') }}</span>
                           <h4 class="it-section-title it-split-in-right mb-0"> {{ __('site.projects_title') }}</h4>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-12">
                        <div class="it-project-wrapper p-relative">
                           <div class="swiper-container it-project-5-active">
                              <div class="swiper-wrapper">
                                 <div class="swiper-slide" >
                                    <div class="it-project-item">
                                       <div class="it-project-thumb">
                                          <img class="w-100" src="assets/img/project/1.jpg" alt="">
                                       </div>
                                       <div class="it-project-2-content d-flex justify-content-between">
                                          <div>
                                             <h4 class="it-project-2-title">
                                                <a href="{{ route('salle-sport.index2') }}" class="border-line-white">
                                                   {{ __('site.project_1') }}
                                                </a>
                                             </h4>
                                            
                                          </div>
                                          <div class="it-project-arrow">
                                             <a href="portfolio-details.html">
                                                <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>
                                 <div class="swiper-slide">
                                    <div class="it-project-item">
                                       <div class="it-project-thumb">
                                          <img class="w-100" src="assets/img/project/2.jpg" alt="">
                                       </div>
                                       <div class="it-project-2-content d-flex justify-content-between">
                                          <div>
                                             <h4 class="it-project-2-title">
                                                <a href="portfolio-details.html" class="border-line-white">
                                                   {{ __('site.project_2') }}
                                                </a>
                                             </h4>
                                           
                                          </div>
                                          <div class="it-project-arrow">
                                             <a href="portfolio-details.html">
                                                <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>
                                 <div class="swiper-slide">
                                    <div class="it-project-item">
                                       <div class="it-project-thumb">
                                          <img class="w-100" src="assets/img/project/3.jpg"  alt="">
                                       </div>
                                       <div class="it-project-2-content d-flex justify-content-between">
                                          <div>
                                             <h4 class="it-project-2-title">
                                                <a href="portfolio-details.html" class="border-line-white">
                                                 {{ __('site.project_3') }}
                                                </a>
                                             </h4>
                                            
                                          </div>
                                          <div class="it-project-arrow">
                                             <a href="portfolio-details.html">
                                                <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>
                                 
                                 <div class="swiper-slide">
                                    <div class="it-project-item">
                                       <div class="it-project-thumb">
                                          <img class="w-100" src="assets/img/project/4.jpg" alt="">
                                       </div>
                                       <div class="it-project-2-content d-flex justify-content-between">
                                          <div>
                                             <h4 class="it-project-2-title">
                                                <a href="portfolio-details.html" class="border-line-white">
                                               {{ __('site.project_4') }}
                                                </a>
                                             </h4>
                                 
                                          </div>
                                          <div class="it-project-arrow">
                                             <a href="portfolio-details.html">
                                                <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>
                                 <div class="swiper-slide">
                                    <div class="it-project-item">
                                       <div class="it-project-thumb">
                                          <img class="w-100" src="assets/img/project/5.jpg" alt="">
                                       </div>
                                       <div class="it-project-2-content d-flex justify-content-between">
                                          <div>
                                             <h4 class="it-project-2-title">
                                                <a href="portfolio-details.html" class="border-line-white">
                                                 {{ __('site.project_5') }}
                                                </a>
                                             </h4>
                                          </div>
                                          <div class="it-project-arrow">
                                             <a href="portfolio-details.html">
                                                <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>
                              </div>
                           </div>
                           <div class="mt-50">
                              <div class="row gx-0 align-items-center">
                                 <div class="col-lg-4 col-md-4 col-5">
                                    <div class="it-project-arrow-wrap">
                                     
                                       <button class="arrow-next">
                                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                             xmlns="http://www.w3.org/2000/svg">
                                             <path
                                                d="M15.7071 8.70711C16.0976 8.31658 16.0976 7.68342 15.7071 7.29289L9.34315 0.928932C8.95262 0.538408 8.31946 0.538408 7.92893 0.928932C7.53841 1.31946 7.53841 1.95262 7.92893 2.34315L13.5858 8L7.92893 13.6569C7.53841 14.0474 7.53841 14.6805 7.92893 15.0711C8.31946 15.4616 8.95262 15.4616 9.34315 15.0711L15.7071 8.70711ZM0 9H15V7H0V9Z"
                                                fill="currentcolor" />
                                          </svg>
                                       </button>
									     <button class="arrow-prev">
                                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                             xmlns="http://www.w3.org/2000/svg">
                                             <path
                                                d="M0.292892 7.29289C-0.0976315 7.68342 -0.0976315 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM16 7H0.999999V9H16V7Z"
                                                fill="currentcolor" />
                                          </svg>
                                       </button>
                                    </div>
                                 </div>
                                 <div class="col-lg-7 col-md-7 col-5">
                                    <div class="it-project-dots"></div>
                                 </div>
                                 <div class="col-lg-1 col-md-1 col-2">
                                    <div class="text-center">
                                       <div class="swiper-fraction"></div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>



            <div class="it-blog-area it-blog-style-2 pt-95 pb-45"  style="background:ghostwhite;">
               <div class="container">
                  <div class="row gx-35">
                     <div class="col-xl-4">
                        <div class="it-blog-3-left">
                           <div class="it-section-title-box mb-15">
                              <span class="it-section-subtitle">  {{ __('site.trophies_subtitle') }}</span>
                              <h4 class="it-section-title it-split-in-right mb-0">{{ __('site.trophies_title') }}</h4>
                           </div>
                          
                           <div class="it-blog-btn wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                              <a href="{{ route('trophees.index') }}" class="it-btn-orange">
                                 <span>
                                    <span class="text-1"> {{ __('site.trophies_browse') }}</span>
                                    <span class="text-2"> {{ __('site.trophies_browse') }}</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>
                           </div>


                        </div>
                     </div>




                     <div class="col-xl-8">
    @foreach($trophee_sportif as $item)
        <div class="it-blog-item mb-4">
            <div class="row align-items-center">
                <div class="col-lg-9 col-md-10">
                    <div class="it-blog-item-left d-flex align-items-center">
                        
                        <div class="it-blog-thumb" style="width: 300px; height: 170px; overflow: hidden; border-radius: 8px;">
    @if(!empty($item->image))
      <img src="{{ asset('uploads/' . $item->image) }}" alt="{{ trans_field($item, 'titre') }}" style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
      <img class="w-100 rounded" src="{{ asset('uploads/' . $item->image) }}" alt="{{ trans_field($item, 'titre') }}" style="width:100%; height:100%; object-fit:cover; border-radius:8px;">

    @elseif(!empty($item->youtube_url))
        @php
            preg_match('/(youtu\.be\/|v=)([A-Za-z0-9_\-]+)/', $item->youtube_url, $matches);
            $youtubeId = $matches[2] ?? null;
        @endphp
        @if($youtubeId)
            <div class="ratio ratio-16x9">
                <iframe 
                    src="https://www.youtube.com/embed/{{ $youtubeId }}" 
                    title="YouTube video"
                    allowfullscreen 
                    style="max-width:300px; height:auto;">
                </iframe>
            </div>
        @endif

    @else
        {{-- ❌ Sinon, image par défaut --}}
        <img class="w-100 rounded"
             src="{{ asset('assets/img/no-image.jpg') }}"
             alt="Pas d'image disponible">
    @endif
</div>


                        {{-- Titre et date --}}
                        <div class="it-blog-content ms-3">
                            <div class="it-blog-meta mb-2">
                                <span class="text-muted">
                                    <i class="fa fa-calendar text-danger me-1"></i>
                                    {{ \Carbon\Carbon::parse($item->date)->format('Y.m.d') }}
                                </span>
                            </div>

                            <h4 class="it-blog-title mb-0">
                                <a class="border-line-black text-dark fw-bold" href="#">
                                 {{ trans_field($item, 'title') }}
                                </a>
                            </h4>

                            <p class="d-block mb-3" style="color:#555; font-size:15px;"> {{ trans_field($item, 'resume') }}</p>
                        </div>
                    </div>
                </div>

                {{-- Flèche --}}
                <div class="col-lg-3 col-md-2 text-end">
    <a href="{{ route('trophees.show', $item->slug) }}" 
       class="btn-readmore text-white d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill">
        <span> {{ __('site.read_more') }} </span>
        <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.49651
                     H1.01922V0.5H12V11.4808H10.0035V3.90804Z"
                  fill="white" />
        </svg>
    </a>
</div>

<style>
    .btn-readmore {
        background-color: #d82b2a; /* 🔴 même couleur que ta flèche initiale */
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .btn-readmore:hover {
        background-color: #d82b2a; /* un peu plus foncé au survol */
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }

    .btn-readmore svg {
        transition: transform 0.3s ease;
    }

    .btn-readmore:hover svg {
        transform: translateX(4px);
    }
</style>

            </div>
        </div>
    @endforeach
</div>



                     
                  </div>
               </div>
            </div>

            <div class="it-brand-area">
               <div class="container">
                  <div class="it-brand-ptb">
                      <div class="col-xl-12">
                        <div class="it-section-title-box text-center mb-65">
                           <span class="it-section-subtitle"> {{ __('site.sport_universities') }}</span>
						       <h4 class="it-section-title it-split-in-right mb-0">{{ __('site.sport_universities_desc') }}</h4>
							  </div>
							  </div>
                     
                   <div class="col-xl-12 col-lg-12 col-md-11">
   <div class="swiper-container it-brand-active">
      <div class="swiper-wrapper slider-transtion d-flex align-items-center">
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/1.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/2.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/3.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/4.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/5.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/6.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/7.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/8.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/9.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/10.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/11.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/12.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/13.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/14.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/15.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/16.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/17.jpg" alt=""></a></div></div>
         <div class="swiper-slide"><div class="it-brand-item"><a href="#"><img src="assets/img/brand/18.jpg" alt=""></a></div></div>
      </div>
   </div>
</div>


                     </div>
                  </div>
               </div>
         
            <!-- brand-area-end -->

        
            <!-- project-area-start -->
            <div class="it-project-3-area pt-65 pb-45"  style="background:ghostwhite;">
               <div class="container">
                  <div class="row">
                     <div class="col-xl-12">
                        <div class="it-section-title-box text-center mb-65">
                           <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="row">
               <div class="col-12">
                  <div class="it-project-3-wrapper p-relative">
                     <div class="swiper-container it-project-3-active">
                     <div class="swiper-wrapper">

                        @foreach($auberges as $auberge)
                           <div class="swiper-slide">
                           <div class="luxury-room-card p-relative">
                              <div class="room-thumb">
                                 <img src="{{ asset('uploads/' . $auberge->image) }}" alt="{{ trans_field($auberge, 'nom') }}" style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
                                 <img class="w-100 rounded" src="{{ asset('uploads/' . $auberge->image) }}" alt="{{ trans_field($auberge, 'nom') }}" style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
                           </div>
                              <div class="room-content">
                                 <h4 class="room-title">
                                 <a href="">
                                    {{ trans_field($auberge, 'nom') }}
                                 </a>
                                 </h4>

                                 {{-- 🔹 Capacité --}}
                                 <div class="room-meta">
                                 @if($auberge->nb_chambres > 0)
                                   <span><i class="fas fa-bed"></i> {{ __('site.auberge_capacity_beds', ['count' => $auberge->nb_chambres]) }}</span>
                                 @endif
                                 @if($auberge->capacite_tentes > 0)
                                    <span><i class="fas fa-campground"></i> {{ $auberge->capacite_tentes }} سريرا تحت الخيام</span>
                                 @endif
                                 </div>

                                 {{-- 🔹 Services --}}
                                 <div class="room-features">
                                 @if($auberge->services_auberge->isNotEmpty())
                                    @foreach($auberge->services_auberge as $service)
                                       <div class="feature">
                                       <i class="fas fa-check"></i>
                                       <span>{{ $service->{'nom_'.app()->getLocale()} ?? $service->nom_ar }}</span>
                                       </div>
                                    @endforeach
                                 @else
                                    <div class="feature">
                                       <span>-</span>
                                    </div>
                                 @endif
                                 </div>

                                 {{-- 🔹 Contact --}}
                                 <div class="room-contact">
                                 @if($auberge->contact_tel)
                                    <i class="fas fa-phone"></i> {{ $auberge->contact_tel }}
                                 @endif
                                 @if($auberge->adresse)
                                    <i class="fas fa-map-marker-alt"></i> {{ $auberge->adresse }}
                                 @endif
                                 </div>

                                 {{-- 🔹 Bouton --}}
                               <a class="book-now-btn" href="{{ route('auberge.show', $auberge->id) }}">
    {{ __('site.book_now') }} <i class="fas fa-arrow-right"></i>
</a>

                              </div>
                           </div>
                           </div>
                        @endforeach

                     </div>
                     </div>

                     <div class="it-project-arrow-wrap d-none d-xl-block">
                        <button class="arrow-prev">
                           <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                              <path d="M0.292892 7.29289C-0.0976315 7.68342 -0.0976315 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM16 7H0.999999V9H16V7Z"
                                    fill="currentColor"/>
                           </svg>
                        </button>

                        <button class="arrow-next">
                           <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                              <path d="M15.7071 8.70711C16.0976 8.31658 16.0976 7.68342 15.7071 7.29289L9.34315 0.928932C8.95262 0.538408 8.31946 0.538408 7.92893 0.928932C7.53841 1.31946 7.53841 1.95262 7.92893 2.34315L13.5858 8L7.92893 13.6569C7.53841 14.0474 7.53841 14.6805 7.92893 15.0711C8.31946 15.4616 8.95262 15.4616 9.34315 15.0711L15.7071 8.70711ZM0 9H15V7H0V9Z"
                                    fill="currentColor"/>
                           </svg>
                        </button>
                        </div>

                  </div>
                  <div class="it-project-3-dots text-center mt-55"></div>
               </div>
               </div>
				   <div class="row align-items-center">
                              <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12">
                                 
                                 <div class="it-about-2-btn" style="padding-top: 25px;text-align: center;">
                                    <a href="contact.html" class="it-btn-orange">
                                       <span>
                                      <span class="text-1">{{ __('site.all_centers') }}</span>
<span class="text-2">{{ __('site.all_centers') }}</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>
                                 </div>
                              </div>
                             
                           </div>
               </div>
            </div>
            <!-- project-area-end -->
   

        <!-- contact-area-start -->
            <div class="it-contact-area  z-index-1 pt-130 pb-130"
               data-background="assets/img/shape/contact-1-2.jpg">
               <img class="it-contact-shape-2" src="assets/img/shape/choose-1-1.png" alt="">
               <div class="container">
                  <div class="row align-items-center">
                     <div class="col-xl-6 col-lg-6">
                       <div class="it-contact-left">
    <div class="it-section-title-box mb-20">
        <span class="it-section-subtitle">{{ __('site.contact_subtitle') }}</span>
    </div>

    <p class="mb-30 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".3s">
        {{ __('site.contact_description') }}
    </p>

    <div class="it-contact-list-wrap">
        <div class="row">
            <div class="col-lg-5 col-md-5 col-sm-6">
                <div class="it-contact-list-box wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                    <div class="it-contact-list mb-40">
                        <span>{{ __('site.contact_phone') }}</span>
                        <a class="border-line-white" href="tel:71841433">71.841.433</a>
                    </div>

                    <div class="it-contact-list">
                        <span>{{ __('site.contact_email') }}</span>
                        <a class="border-line-white" href="mailto:mjsep@mjs.tn">mjsep@mjs.tn</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-7 col-md-7 col-sm-6 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".7s">
                <div class="it-contact-list-box">
                    <div>
                        <div class="it-contact-list mb-40">
                            <span>{{ __('site.contact_address') }}</span>
                            <a class="border-line-white" href="#">
                            {{ __('site.contact_address_full') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

                     </div>
                     <div class="col-lg-6 col-lg-6">
                        <div class="it-contact-form-box z-index-1 p-relative">
                       <h4 class="it-contact-form-title  it-split-in-right mb-10"> {{ __('site.contact_title') }}</h4>
<p>{{ __('site.contact_form_paragraph') }}  </p>
           <form action="#" method="POST">
            @csrf
            <div class="it-contact-input-wrap">
                <div class="row gx-30">
                    <div class="col-sm-6 mb-20">
                        <div class="it-contact-input-box">
                            <input
                                type="text"
                                name="name"
                                placeholder="{{ __('site.contact_placeholder_name') }}"
                                value="{{ old('name') }}"
                                required
                            >
                        </div>
                    </div>

                    <div class="col-sm-6 mb-20">
                        <div class="it-contact-input-box">
                            <input
                                type="email"
                                name="email"
                                placeholder="{{ __('site.contact_placeholder_email') }}"
                                value="{{ old('email') }}"
                                required
                            >
                        </div>
                    </div>

                    <div class="col-sm-6 mb-20">
                        <div class="it-contact-input-box">
                            <input
                                type="text"
                                name="phone"
                                placeholder="{{ __('site.contact_placeholder_phone') }}"
                                value="{{ old('phone') }}"
                            >
                        </div>
                    </div>

                    <div class="col-sm-6 mb-20">
                        <div class="it-contact-input-box">
                            <div class="postbox__select">
                                <select name="subject" required>
                                    <option selected disabled>{{ __('site.contact_subject') }}</option>
                                    <option value="inquiry">{{ __('site.contact_option_inquiry') }}</option>
                                    <option value="note">{{ __('site.contact_option_note') }}</option>
                                    <option value="complaint">{{ __('site.contact_option_complaint') }}</option>
                                    <option value="suggestion">{{ __('site.contact_option_suggestion') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12 mb-40">
                        <div class="it-contact-input-box">
                            <textarea
                                name="message"
                                placeholder="{{ __('site.contact_message_placeholder') }}"
                                required
                            >{{ old('message') }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="it-contact-btn">
                    <button type="submit" class="it-btn-orange">
                        <span>
                            <span class="text-1">{{ __('site.contact_send') }}</span>
                            <span class="text-2">{{ __('site.contact_send') }}</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>
                    </button>
                </div>
            </div>
        </form>

                           <img class="it-contact-shape-1" src="assets/img/shape/contact-1-1.png" alt="">
                        </div>
                     </div>
                  </div>
               </div>
            </div>

         </main>
  
<style>
   .it-blog-thumb {
      position: relative;
      width: 100%;
      max-width: 320px;
      margin: 0 auto;
      border-radius: 8px;
      overflow: hidden;
   }

   .video-container {
      position: relative;
      width: 100%;
      padding-top: 56.25%; 
      border-radius: 8px;
      overflow: hidden;
      background: #000;
   }

   .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }
   .it-blog-thumb img {
      width: 100%;
      object-fit: cover; 
      border-radius: 8px;
      display: block;
   }
</style>
@endsection