@extends('layouts.app')

@section('content')


            <div class="it-hero-3-area pt-0">
                <div class="swiper hero-slider">
                   <div class="swiper-wrapper">
                     <div class="swiper-slide" >
                        <div class="it-hero-2-overlay fix gray-bg z-index-1" style="background-image: url('assets/img/hero/1.jpg');">
                           <div class="container">
                              <div class="row align-items-center">
                                 <div class="col-xl-6 col-lg-6">
                                    <div class="it-hero-2-content">
                                       <h4 class="it-hero-3-subtitle it-split-in-right">
                                          <span>الجمهورية التونسية</span>
                                       </h4>
                                       <h1 class="it-hero-2-title it-split-in-right">
                                          وزارة الشباب والرياضة
                                       </h1>
                                       <h4 class="it-hero-2-subtitle it-split-in-right" style="color:#fff;">
                                          مركبات ومراكز إقامة الشباب في تونس
                                       </h4>
                                       <div class="it-hero-2-text wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                                          <p class="mb-30"><br/></p>
                                       </div>
                                       <div class="it-hero-btn d-sm-flex align-items-center">
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay=".8">
                                             <a href="contact.html" class="it-btn-orange mr-30 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".7s">
                                                <span>
                                                   <span class="text-1">إتصل بنا</span>
                                                   <span class="text-2">إتصل بنا</span>
                                                </span>
                                                <i>
                                                   <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                   </svg>
                                                </i>
                                             </a>
                                          </div>
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay="1">
                                             <a href="service.html" class="it-btn-border wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".9s">
                                                <span>
                                                   <span class="text-1">آخر الأخبار</span>
                                                   <span class="text-2">آخر الأخبار</span>
                                                </span>
                                                <i>
                                                   <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                   </svg>
                                                </i>
                                             </a>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <!--div class="col-xl-6 col-lg-6">
                                    <form class="booking-form">
                                       <h4 class="it-contact-form-title mb-10" style="color:#FFFFFF;">حجز الإقامة</h4>
                                       <div class="row">
									    <div class="col-md-12 mb-3">
                                             <label>اختر الولاية</label>
                                             <select class="form-select">
                                                <option selected>اختر الولاية</option>
                                                <option>دار الشباب 1</option>
                                                <option>دار الشباب 2</option>
                                                <option>دار الشباب 3</option>
                                             </select>
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>اختر الدار</label>
                                             <select class="form-select">
                                                <option selected>اختر دار الشباب</option>
                                                <option>دار الشباب 1</option>
                                                <option>دار الشباب 2</option>
                                                <option>دار الشباب 3</option>
                                             </select>
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>عدد الأماكن</label>
                                             <input type="number" class="form-control" min="1" max="10">
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>تاريخ الوصول</label>
                                             <input type="date" class="form-control">
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>تاريخ المغادرة</label>
                                             <input type="date" class="form-control">
                                          </div>
                                          <div class="col-12 mb-3">
                                             <label>نوع الإقامة</label>
                                             <select class="form-select">
                                                <option selected>اختر نوع الإقامة</option>
                                                <option>إقامة كاملة</option>
                                                <option>نصف إقامة</option>
                                                <option>إقامة بدون وجبات</option>
                                             </select>
                                          </div>
                                          <div class="col-12">
                                             <button type="submit" class="it-btn-orange">احجز الآن</button>
                                          </div>
                                       </div>
                                    </form>
                                 </div-->
                              </div>
                           </div>
                        </div>
                     </div>
                     <!-- Slide 2 -->
                     <div class="swiper-slide">
                        <div class="it-hero-2-overlay fix gray-bg z-index-1" style="background-image: url('assets/img/hero/3.jpg');">
                           <div class="container">
                              <div class="row align-items-center">
                                 <div class="col-xl-6 col-lg-6">
                                    <div class="it-hero-2-content">
                                       <h4 class="it-hero-3-subtitle it-split-in-right">
                                          <span>الجمهورية التونسية</span>
                                       </h4>
                                       <h1 class="it-hero-2-title it-split-in-right">
                                          وزارة الشباب والرياضة
                                       </h1>
                                       <h4 class="it-hero-2-subtitle it-split-in-right" style="color:#fff;">
                                         مركبات ومراكز إقامة الشباب في تونس
                                       </h4>
                                       <div class="it-hero-2-text wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                                          <p class="mb-30"><br/></p>
                                       </div>
                                       <div class="it-hero-btn d-sm-flex align-items-center">
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay=".8">
                                             <a href="contact.html" class="it-btn-orange mr-30 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".7s">
                                                <span>
                                                   <span class="text-1">إتصل بنا</span>
                                                   <span class="text-2">إتصل بنا</span>
                                                </span>
                                                <i>
                                                   <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                   </svg>
                                                </i>
                                             </a>
                                          </div>
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay="1">
                                             <a href="service.html" class="it-btn-border wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".9s">
                                                <span>
                                                   <span class="text-1">آخر الأخبار</span>
                                                   <span class="text-2">آخر الأخبار</span>
                                                </span>
                                                <i>
                                                   <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                   </svg>
                                                </i>
                                             </a>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <!--div class="col-xl-6 col-lg-6">
                                    <form class="booking-form">
                                       <h4 class="it-contact-form-title mb-10" style="color:#FFFFFF;">حجز الإقامة</h4>
                                       <div class="row">
                                          <div class="col-md-6 mb-3">
                                             <label>اختر الدار</label>
                                             <select class="form-select">
                                                <option selected>اختر دار الشباب</option>
                                                <option>دار الشباب 1</option>
                                                <option>دار الشباب 2</option>
                                                <option>دار الشباب 3</option>
                                             </select>
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>عدد الأماكن</label>
                                             <input type="number" class="form-control" min="1" max="10">
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>تاريخ الوصول</label>
                                             <input type="date" class="form-control">
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>تاريخ المغادرة</label>
                                             <input type="date" class="form-control">
                                          </div>
                                          <div class="col-12 mb-3">
                                             <label>نوع الإقامة</label>
                                             <select class="form-select">
                                                <option selected>اختر نوع الإقامة</option>
                                                <option>إقامة كاملة</option>
                                                <option>نصف إقامة</option>
                                                <option>إقامة بدون وجبات</option>
                                             </select>
                                          </div>
                                          <div class="col-12">
                                             <button type="submit" class="it-btn-orange">احجز الآن</button>
                                          </div>
                                       </div>
                                    </form>
                                 </div-->
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="swiper-slide">
                        <div class="it-hero-2-overlay fix gray-bg z-index-1" style="background-image: url('assets/img/hero/2.jpg');">
                           <div class="container">
                              <div class="row align-items-center">
                                 <div class="col-xl-6 col-lg-6">
                                    <div class="it-hero-2-content">
                                       <h4 class="it-hero-3-subtitle it-split-in-right">
                                          <span>الجمهورية التونسية</span>
                                       </h4>
                                       <h1 class="it-hero-2-title it-split-in-right">
                                          وزارة الشباب والرياضة
                                       </h1>
                                       <h4 class="it-hero-2-subtitle it-split-in-right" style="color:#fff;">
                                         مركبات ومراكز إقامة الشباب في تونس
                                       </h4>
                                       <div class="it-hero-2-text wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                                          <p class="mb-30"><br/></p>
                                       </div>
                                       <div class="it-hero-btn d-sm-flex align-items-center">
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay=".8">
                                             <a href="contact.html" class="it-btn-orange mr-30 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".7s">
                                                <span>
                                                   <span class="text-1">إتصل بنا</span>
                                                   <span class="text-2">إتصل بنا</span>
                                                </span>
                                                <i>
                                                   <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                   </svg>
                                                </i>
                                             </a>
                                          </div>
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay="1">
                                             <a href="service.html" class="it-btn-border wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".9s">
                                                <span>
                                                   <span class="text-1">آخر الأخبار</span>
                                                   <span class="text-2">آخر الأخبار</span>
                                                </span>
                                                <i>
                                                   <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                   </svg>
                                                </i>
                                             </a>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <!--div class="col-xl-6 col-lg-6">
                                    <form class="booking-form">
                                       <h4 class="it-contact-form-title mb-10" style="color:#FFFFFF;">حجز الإقامة</h4>
                                       <div class="row">
                                          <div class="col-md-6 mb-3">
                                             <label>اختر الدار</label>
                                             <select class="form-select">
                                                <option selected>اختر دار الشباب</option>
                                                <option>دار الشباب 1</option>
                                                <option>دار الشباب 2</option>
                                                <option>دار الشباب 3</option>
                                             </select>
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>عدد الأماكن</label>
                                             <input type="number" class="form-control" min="1" max="10">
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>تاريخ الوصول</label>
                                             <input type="date" class="form-control">
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>تاريخ المغادرة</label>
                                             <input type="date" class="form-control">
                                          </div>
                                          <div class="col-12 mb-3">
                                             <label>نوع الإقامة</label>
                                             <select class="form-select">
                                                <option selected>اختر نوع الإقامة</option>
                                                <option>إقامة كاملة</option>
                                                <option>نصف إقامة</option>
                                                <option>إقامة بدون وجبات</option>
                                             </select>
                                          </div>
                                          <div class="col-12">
                                             <button type="submit" class="it-btn-orange">احجز الآن</button>
                                          </div>
                                       </div>
                                    </form>
                                 </div-->
                              </div>
                           </div>
                        </div>
                     </div>
                                
				</div>
                  <!-- Add Pagination -->
                  <!--div class="swiper-pagination"></div-->
                  <!-- Add Navigation -->
                  <div class="swiper-button-next"></div>
                  <div class="swiper-button-prev"></div>
               </div>
            </div>
            <!-- hero-area-end -->
    
    

			
      <!-- virtual tour section -->
    <section class="virtual-tour-section pt-100 pb-0">    <div class="container">        
	<div class="row">            <div class="col-12 text-center mb-50">                
	<div class="it-section-title-box mb-20">                 
	<span class="it-section-subtitle">مركبات ومراكز إقامة الشباب في تونس</span>      
	<h4 class="it-section-title it-split-in-right mb-0">اكتشف مركبات ومراكز إقامة الشباب عبر مختلف الولايات</h4>
	</div>            </div>        </div>        <div class="it-project-2-area z-index-1 pb-10 pt-15">       
	<div class="container">                <div class="row gx-35">                    @foreach($gouvernorats as $gouv)   
	<div class="col-md-4">                        <div class="it-project-2-item mb-30">                         
	<div class="it-project-2-thumb fix it-img-anim-wrap p-relative">                              
	<div class="it-about-thumb it-img-anim" data-displacement="assets/img/webgl/pattern-1.jpg"               
	data-intensity="0.6" data-speedin="1" data-speedout="1">                                  
		@if($gouv->image_gouv)
		<img class="w-100" 
			 src="data:image/jpeg;base64,{{ base64_encode($gouv->image_gouv) }}" 
			 alt="{{ $gouv->gouvernorat->nom_ar ?? '' }}">
	@else
		<span class="text-muted">—</span>
	@endif
		
	</div>                                                           </div>                        
    <div class="it-project-2-content d-flex justify-content-between align-items-center">                           
	<div>                                    <h4 class="it-project-2-title">                               
	<a href="{{ route('detail_gouver', $gouv->id_gouv) }}" class="border-line-black">                                    
	{{ $gouv->gouvernorat->nom_ar ?? '' }}                                        </a>                                 
	</h4>                                </div>                             
	<div class="it-project-arrow">                                  
	<a href="{{ route('detail_gouver', $gouv->id_gouv) }}">          
	<svg width="13" height="14" viewBox="0 0 13 14" fill="none"          
	xmlns="http://www.w3.org/2000/svg">                                    
	<path d="M11.103 0.952468C11.03 0.405028 10.527 0.0204122 9.97959 0.0934039L1.05854 1.28288C0.511097 1.35587 0.126481 1.85883 0.199473 2.40627C0.272465 2.95371 0.775425 3.33833 1.32287 3.26533L9.25269 2.20802L10.31 10.1378C10.383 10.6853 10.8859 11.0699 11.4334 10.9969C11.9808 10.9239 12.3654 10.421 12.2925 9.87352L11.103 0.952468ZM1.79436 13.6075L10.9061 1.69208L9.31739 0.477182L0.205642 12.3925L1.79436 13.6075Z" fill="white"/>                                        </svg>                                    </a>                                </div>                            </div>                        </div>                    </div>                    @endforeach                </div>                <div class="row">                    <div class="col-12">                        <div class="it-pagination text-center mt-50">                            {{ $gouvernorats->links() }} <!-- Pagination Laravel -->                        </div>                    </div>                </div>            </div>        </div>    </div></section>
  
  
      <!-- about us section -->
            <section class="about-section pt-100 pb-70" style="background:ghostwhite;">
         <div class="container">
            <div class="row align-items-center">
               <div class="col-lg-6 mb-30">
                  <div class="about-content">
				    <div class="it-section-title-box mb-20">
                              <span class="it-section-subtitle">خدمة دور الشباب</span>
                           
                           </div>
                     <div class="it-about-2-text">
                              <p class="mb-30">
                     <p>نقدم لكم خدمة حجز دور الشباب في جميع أنحاء البلاد. توفر دور الشباب إقامة مريحة وبأسعار معقولة للشباب والعائلات. تتميز دورنا بموقعها الاستراتيجي وخدماتها المتنوعة.</p>
                     <p>نوفر:</p>
                     <ul class="list-unstyled">
                        <li><i class="fas fa-check"></i> غرف مجهزة بالكامل</li>
                        <li><i class="fas fa-check"></i> خدمة الإطعام</li>
                        <li><i class="fas fa-check"></i> مرافق رياضية وترفيهية</li>
                        <li><i class="fas fa-check"></i> أسعار تنافسية</li>
                     </ul>
					 </p></div>
                  </div>
               </div>
               <div class="col-lg-6 mb-30">
               <div class="map-container hover-overlay" style="position: relative; overflow: hidden;">
                  <img src="assets/img/faq/map.jpg" 
                     alt="خريطة دور الشباب" 
                     class="img-fluid" 
                     style="width: 100%; height: auto;">
                  <div class="overlay"></div>
                  <div id="map-points"></div>
               </div>
            </div>

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