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

<!-- Page Preloader -->
<div id="page-preloader">
    <img src="{{ asset('assets/img/logo/logo.png') }}" alt="Logo" class="preloader-logo">
    <div class="preloader-spinner"></div>
   <!-- <p class="preloader-text">{{ __('site.loading') ?? 'جاري التحميل...' }}</p>-->
</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="{{ $slider->imageSrc }}" >
                     <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 required 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="{{ url('page/2') }}" 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>

<!-- ******************************NEWS*********************************** -->
        <div class="it-blog-area pt-45 pb-45 news-section"  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)
                                                         <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))
                                                       <img class="w-100 rounded" src="{{ $item->imageSrc }}" alt="{{ trans_field($item, 'title') ?? trans_field($item, 'titre') }}">

                                                      <img class="w-100 rounded" src="{{ $item->imageSrc }}" 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-->
													  <p class="truncate-resume">{{ trans_field($item, 'resume') ?? '' }}</p>
                                                     
													     <div class="it-blog-btn text-center">
                                       <a href="{{ route('news.show', $item->slug) }}" class="it-btn-orange">
        <span>
            <span class="text-1">{{ __('site.read_more') }}</span>
            <span class="text-2">{{ __('site.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>
                        @endforeach
                     @empty
                        <div class="col-12">
                             <p>{{ __('site.no_news') }}</p>
                        </div>
                     @endforelse
                  </div>
               </div>
            </div>
			
			<script>
				document.addEventListener("DOMContentLoaded", function() {
    const section = document.querySelector('.news-section'); 
    if (!section) return;

    const items = section.querySelectorAll('.it-blog-content');
    const MAX_HEIGHT = 500; // hauteur maximale

    function setHeights() {
        let maxHeight = 0;

        // Reset des hauteurs
        items.forEach(el => el.style.height = 'auto');

        // Calcul de la hauteur maximale
        items.forEach(el => {
            const height = el.offsetHeight;
            if(height > maxHeight) maxHeight = height;
        });

        // Appliquer la hauteur max ou la limite
        const finalHeight = Math.min(maxHeight, MAX_HEIGHT);
        items.forEach(el => el.style.height = finalHeight + 'px');
    }

    // Initial
    setHeights();

    // Recalcul au resize
    window.addEventListener('resize', setHeights);
});

			</script>
			<!-- ***************************************************************** -->
 
            <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" style="TEXT-ALIGN: center;">{{ __('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="{{ url('page/49') }}" 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="{{ url('page/62') }}"  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="{{ url('page/57') }}"  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="{{ url('page/50') }}"  class="service-box">
                        <div class="title-icon-wrapper">
                           <span class="service-icon"><i class="ri-funds-line"></i></span>
                             {{ __('site.services_projects') }}
                        </div>
                            <span class="service-link">{{ __('site.services_apply_more') }}</span>
                     </a>
					 <a href="{{ url('page/50') }}"  class="service-box">
                        <div class="title-icon-wrapper">
                           <span class="service-icon"><i class="ri-community-line"></i></span>
                            {{ __('site.service_association_funding_title') }}
                        </div>
                            <span class="service-link">{{ __('site.services_apply_more') }}</span>
                     </a>
					  <a href="{{ url('page/50') }}"  class="service-box">
                        <div class="title-icon-wrapper">
                           <span class="service-icon"><i class="ri-trophy-line"></i></span>
                            {{ __('site.service_events_title') }}
                        </div>
                            <span class="service-link">{{ __('site.services_apply_more') }}</span>
                     </a>
					  <a href="/gouvernorats"  class="service-box">
                        <div class="title-icon-wrapper">
                           <span class="service-icon"><i class="ri-calendar-check-line"></i></span>
                            {{ __('site.youth_centers_title') }}
                        </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" style="text-align: center;"> {{ __('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">

            {{-- Projet 1 --}}
            <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">
            @auth
                <a href="{{ route('salle-sport.index2') }}" class="border-line-white">
                    {{ __('site.project_1') }}
                </a>
            @endauth

            @guest
                <a href="{{ route('login', ['redirectTo' => route('salle-sport.index2')]) }}" class="border-line-white">
                    {{ __('site.project_1') }}
                </a>
            @endguest
        </h4>
    </div>

    <div class="it-project-arrow">
        @auth
            <a href="{{ route('salle-sport.index2') }}">
        @endauth

        @guest
            <a href="{{ route('login', ['redirectTo' => route('salle-sport.index2')]) }}">
        @endguest

                <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>

            {{-- Projet 2 --}}
          <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">
                    @auth
                        <a href="{{ route('jeune_enfant.index') }}" class="border-line-white">
                            {{ __('site.project_2') }}
                        </a>
                    @endauth

                    @guest
                        <a href="{{ route('login', ['redirectTo' => route('jeune_enfant.index')]) }}" class="border-line-white">
                            {{ __('site.project_2') }}
                        </a>
                    @endguest
                </h4>
            </div>

            <div class="it-project-arrow">
                @auth
                    <a href="{{ route('jeune_enfant.index') }}">
                @endauth

                @guest
                    <a href="{{ route('login', ['redirectTo' => route('jeune_enfant.index')]) }}">
                @endguest

                        <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>


            {{-- Projet 3 --}}
           <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">
                    @auth
                        <a href="{{ route('jeunesse.index') }}" class="border-line-white">
                            {{ __('site.project_3') }}
                        </a>
                    @endauth

                    @guest
                        <a href="{{ route('login', ['redirectTo' => route('jeunesse.index')]) }}" class="border-line-white">
                            {{ __('site.project_3') }}
                        </a>
                    @endguest
                </h4>
            </div>

            <div class="it-project-arrow">
                @auth
                    <a href="{{ route('jeunesse.index') }}">
                @endauth

                @guest
                    <a href="{{ route('login', ['redirectTo' => route('jeunesse.index')]) }}">
                @endguest

                        <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>


            {{-- Projet 4 --}}
           <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">
                    @auth
                        <a href="{{ route('jeunesse2.index') }}" class="border-line-white">
                            {{ __('site.project_4') }}
                        </a>
                    @endauth

                    @guest
                        <a href="{{ route('login', ['redirectTo' => route('jeunesse2.index')]) }}" class="border-line-white">
                            {{ __('site.project_4') }}
                        </a>
                    @endguest
                </h4>
            </div>

            <div class="it-project-arrow">
                @auth
                    <a href="{{ route('jeunesse2.index') }}">
                @endauth

                @guest
                    <a href="{{ route('login', ['redirectTo' => route('jeunesse2.index')]) }}">
                @endguest

                        <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>


            {{-- Projet 5 --}}
          <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">
                    @auth
                        <a href="{{ route('formation.index') }}" class="border-line-white">
                            {{ __('site.project_5') }}
                        </a>
                    @endauth

                    @guest
                        <a href="{{ route('login', ['redirectTo' => route('formation.index')]) }}" class="border-line-white">
                            {{ __('site.project_5') }}
                        </a>
                    @endguest
                </h4>
            </div>

            <div class="it-project-arrow">
                @auth
                    <a href="{{ route('formation.index') }}">
                @endauth

                @guest
                    <a href="{{ route('login', ['redirectTo' => route('formation.index')]) }}">
                @endguest

                        <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>

    {{-- Navigation swiper --}}
    <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-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="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  pb-10 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="{{ $item->imageSrc }}"
                                   alt="{{ trans_field($item, 'titre') ?? $item->title ?? __('site.no_image_alt') }}" style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
                            <img class="w-100 rounded" src="{{ $item->imageSrc }}"
                                  alt="{{ trans_field($item, 'titre') ?? $item->title ?? __('site.no_image_alt') }}" 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 pb-10 text-center">
                                            <a href="{{ route('trophees.show', $item->slug) }}" 
                                            class="it-btn-orange">
                                                
                                                <span>
                                                    <span class="text-1">{{ __('site.read_more') }}</span>
                                                    <span class="text-2">{{ __('site.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>
    @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" style="TEXT-ALIGN: center;">{{ __('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">
     @php
        // تحديد عدد الشعارات المطلوب عرضها (18 كما في الأصل)
        $logosToShow = 18;
        
        // التحقق من وجود المتغير $federations
        $hasFederations = isset($federations) && $federations->count() > 0;
        
        if($hasFederations) {
            // أخذ 18 جامعة عشوائية
            $federationsToShow = $federations->shuffle()->take($logosToShow);
            
            foreach($federationsToShow as $federation) {
                if($federation->logoSrc) {
     @endphp
                <div class="swiper-slide">
                    <div class="it-brand-item">
                        <a href="{{ $federation->site_web ?: '#' }}" 
                           {{ $federation->site_web ? 'target="_blank"' : '' }} >
                            <img src="{{ $federation->logoSrc }}" 
                                 alt="{{ $federation->nom_ar }}"
                                 style="max-width: 150px; max-height: 100px; object-fit: contain;">
                        </a>
                    </div>
                </div>
     @php
                }
            }
            
            // إذا كان عدد الشعارات أقل من 18، أكمل بالصور الافتراضية
            $currentCount = $federationsToShow->count();
            if($currentCount < $logosToShow) {
                for($i = 1; $i <= ($logosToShow - $currentCount); $i++) {
     @endphp
                <div class="swiper-slide">
                    <div class="it-brand-item">
                        <a href="#">
                            <img src="{{ asset('assets/img/brand/' . $i . '.jpg') }}" alt="">
                        </a>
                    </div>
                </div>
     @php
                }
            }
        } else {
            // إذا لم توجد جامعات، عرض الصور الافتراضية فقط
            for($i = 1; $i <= $logosToShow; $i++) {
     @endphp
                <div class="swiper-slide">
                    <div class="it-brand-item">
                        <a href="#">
                            <img src="{{ asset('assets/img/brand/' . $i . '.jpg') }}" alt="">
                        </a>
                    </div>
                </div>
     @php
            }
        }
     @endphp
  </div>
</div>
</div>
  </div>
	 <div class="it-about-2-btn d-flex justify-content-center pb-65">
                                <a href="{{ route('federation.public.list') }}" class="it-btn-orange">
                                    <span>
        <span class="text-1">{{ __('site.show_all') }}</span>
        <span class="text-2">{{ __('site.show_all') }}</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>
         
            <!-- 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" style="TEXT-ALIGN: center;">{{ __('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">
                        
						 
						 @php $src = $auberge->imageSrc ?? null; @endphp

@if($src)
    <img src="{{ $src }}"
         alt="{{ trans_field($auberge, 'nom') ?? ($auberge->nom_ar ?? $auberge->nom_fr ?? $auberge->nom_en ?? '') }}"
       style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
		   <img class="w-100 rounded"  src="{{ $src }}"
         alt="{{ trans_field($auberge, 'nom') ?? ($auberge->nom_ar ?? $auberge->nom_fr ?? $auberge->nom_en ?? '') }}" style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
@else
    <img src="{{ asset('assets/img/no-image.jpg') }}"
         alt="{{ __('site.no_image_alt') }}"
         style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
@endif

						 </div-->
						 
						 
						 <div class="room-thumb">
    @php 
        // Utiliser l'image du gouvernorat si disponible, sinon l'image de l'auberge
        $src = $auberge->gouvernoratImageSrc ?? $auberge->imageSrc ?? null;
        
        // Déterminer le texte alt
        if ($auberge->gouvernoratImageSrc && $auberge->gouvernorat) {
            $altText = trans_field($auberge->gouvernorat, 'nom') ?? 
                      ($auberge->gouvernorat->nom_ar ?? 
                       $auberge->gouvernorat->nom_fr ?? 
                       $auberge->gouvernorat->nom_en ?? '');
        } else {
            $altText = trans_field($auberge, 'nom') ?? 
                      ($auberge->nom_ar ?? 
                       $auberge->nom_fr ?? 
                       $auberge->nom_en ?? '');
        }
    @endphp

    @if($src)
        <img src="{{ $src }}"
             alt="{{ $altText }}"
             style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
    @else
        <img src="{{ asset('assets/img/no-image.jpg') }}"
             alt="{{ __('site.no_image_alt') }}"
             style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
    @endif
</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>
										{{ trans_choice('site.auberge_capacity_beds', $auberge->nb_chambres, ['count' => $auberge->nb_chambres]) }}
									</span>
								@endif

                                 @if($auberge->capacite_tentes > 0)
									<span>
										<i class="fas fa-campground"></i>
										{{ trans_choice('site.auberge_capacity_tents', $auberge->capacite_tentes, ['count' => $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>

               
									<div class="it-blog-btn">
                                       <a href="{{ route('auberge.show', $auberge->id) }}" class="it-btn-orange">
												<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>
                                    </div>

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

                     </div>
                     </div>

                   

                  </div>
                
               </div>
               </div><div class="row">
				  <div class="col-md-6">
				    <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="col-md-6">
				   <div class="it-about-2-btn d-flex justify-content-end pb-65">
<a href="/gouvernorats" class="it-btn-orange">
                                    <span>
        <span class="text-1">{{ __('site.show_all') }}</span>
        <span class="text-2">{{ __('site.show_all') }}</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>
			
			<script>  
			    document.addEventListener("DOMContentLoaded", function() {
					function setEqualHeights() {
						const cards = document.querySelectorAll('.luxury-room-card');
						let maxHeight = 0;

						// Reset height pour recalculer si resize
						cards.forEach(card => card.style.height = 'auto');

						// Calculer la hauteur max
						cards.forEach(card => {
							const h = card.offsetHeight;
							if(h > maxHeight) maxHeight = h;
						});

						// Appliquer la hauteur max à tous les cards
						cards.forEach(card => card.style.height = maxHeight + 'px');
					}

					// Appeler au chargement
					setEqualHeights();

					// Recalculer si redimensionnement de la fenêtre
					window.addEventListener('resize', setEqualHeights);
				});
			</script>
            <!-- 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>
                           @if(session('contact_success'))
                             <div class="alert alert-success mb-3">{{ session('contact_success') }}</div>
                           @endif

                           @if ($errors->any())
                              <div class="alert alert-danger mb-3">
                                  <ul class="mb-0">
                                      @foreach ($errors->all() as $err)
                                             <li>{{ $err }}</li>
                                      @endforeach
                                  </ul>
                              </div>
                           @endif

           <form id="contactForm" action="{{ route('contact.submit') }}" 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>
		
		<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if(target){
            target.scrollIntoView({ behavior: 'smooth' });
        }
    });
});
</script>

		
		
		

                           <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