<?php  /****************************************** السلايدر الاساسى ***************************************/  ?>
<section id="services" class=" slide_section" >
   <div class='row' style='margin:0 auto' >

	  
	  <div class="col-12 col-md-12 col-lg-12 first_image"  >			
			<div class="owl-carousel owl1 owl-theme main_slide" >
		
						
						<?php
						/*بداية الاستعلام*/  
						$main_slide_query="select `id`,`title`,`desc`,`link`,`video`,`images` from main_slide where active=1 order by `priority` desc , `sort` desc , id desc";
						$main_slide_result=mysqli_query($conn,$main_slide_query);	
						$current_slide=0;
						// بداية التكرار
						while($main_slide_fetch = mysqli_fetch_array($main_slide_result)) {
   		 $main_slide_fetch = clean_array($main_slide_fetch);
							$current_slide++;							
							
							
							if($main_slide_fetch['video']==''){
								//فى حالة السلايد صورة
								/*استخراج جميع الصور*/  
								$current_image=explode(",",$main_slide_fetch['images']);
								$current_image_small=explode(".",$current_image[1]);
								$current_image_small=$current_image_small[0]."_tiny.webp";

								/*استخراج الصورة الاساسية*/  
								$current_image=explode(".",$current_image[1]);
														
							}else{
								//فى حالة السلايد فيديو	
								// استخراج الفيديو من اليوتيوب
								$current_video=explode('&',$main_slide_fetch['video']);
								$current_video=explode('v=',$current_video[0]);
							}
						
						?>
						
						<div class="owl_item1">						

							<span    class="inactive slider_text_inner" style="height:auto%;display:block;position:relative;">
								
								<?php 
								//فى حالة السلايد صورة
								if($main_slide_fetch['video']==''){ 
								?>
									<div class='slide_title_block  d-md-inline-block' style='display:none;'>
										
										<div class='slide_title_white'><?php echo $main_slide_fetch['title']; ?></div>
										<div class='slide_desc_white'><?php echo $main_slide_fetch['desc']; ?></div>
										<a href="tel:<?php echo $_SESSION['comp_mobile1'] ; ?>" rel='nofollow'  class='inactive slide_button_white' href='<?php echo $main_slide_fetch['link']; ?>'>
										اتصل بنـا
										</a>
										
									</div>
									<div class='blue_fog'></div>
									<div class='slide_background' style="background-image:url('<?php echo $img_path; ?>main_slide/<?php echo $current_image[0].$_SESSION['img_size'].'.webp'; ?>');">
										<img style='display:none;' <?php if ($current_slide!=1){ echo "loading='lazy'" ; }?> alt='<?php echo $main_slide_fetch['title']; ?>'  src='<?php echo $img_path; ?>main_slide/<?php echo $current_image[0].$_SESSION['img_size'].'.webp'; ?>' />
									</div>
								<?php 
								}else{ 
									//فى حالة السلايد فيديو
									
									$patterns = [
										'/youtu\.be\/([a-zA-Z0-9_-]{11})/',              // مثال: youtu.be/abc123xyz99
										'/youtube\.com\/.*v=([a-zA-Z0-9_-]{11})/',       // مثال: youtube.com/watch?v=abc123xyz99
										'/youtube\.com\/embed\/([a-zA-Z0-9_-]{11})/',    // مثال: youtube.com/embed/abc123xyz99
										'/youtube\.com\/v\/([a-zA-Z0-9_-]{11})/'         // مثال: youtube.com/v/abc123xyz99
									];
									
									$youtube_id = '';
									$youtube_link='';
									foreach ($patterns as $pattern) {
										if (preg_match($pattern, $main_slide_fetch['video'], $matches)) {
											// إنشاء الرابط الصحيح
											$youtube_link="https://www.youtube.com/embed/" . $matches[1];
											$youtube_id = $matches[1];
										}
										
									}	
								
								?>
								
								
									<div class="video-background">
									
									  <iframe
										src="<?php echo $youtube_link; ?>?autoplay=1&playlist=<?php echo $youtube_id; ?>&mute=1&controls=0&loop=1&modestbranding=1&rel=0&iv_load_policy=3&playsinline=1"
										allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
										allowfullscreen
										loading="lazy"
									  ></iframe>
  

									  <div class="slide_video_overlay"></div>
									  <div class="slide_video_content">
									
									  </div>
									</div>
								
								<?php } ?>
							</span>

						</div>
						
						<?php } ?>
												
												
			</div>
			
			

	  </div>



  </div>
	  
	  
</section>		
			
	
	
<script>
<?php //سكريبت تشغيل السلايدر ?>

			$('.owl1').owlCarousel({
	
			
			//Autoplay
			autoplay: true,
			autoplayTimeout: 1000000,
			autoplayHoverPause: false,
			loop:true,
			
			animateIn: 'fadeIn',
			
			animateOut: 'fadeOut',			

			dots: true  , 
			
			margin:0,

			nav:true,
		

			responsive:{

				0:{

					items:1,


				},

				600:{

					items:1

				},

				1000:{

					items:1

				}

			}

		});

		
</script>

<style>
.owl1 .owl-dots{
	display:block !important;
	bottom:50px !important;
}

 /* الحاوية */
  .video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
  }

  /* الفيديو نفسه */
  .video-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* هذه الأسطر هي السر في تغطية العرض والارتفاع بالكامل */
    width: 177.78vh; /* 100 * (16/9) => تغطية العرض عند الشاشات الرأسية */
    height: 100vh;
    transform: translate(-50%, -50%);
    border: none;
  }

  /* لضمان تغطية العرض في الشاشات العريضة أيضًا */
  @media (min-aspect-ratio: 16/9) {
    .video-background iframe {
      width: 100vw;
      height: 56.25vw; /* 100 * (9/16) => تغطية الارتفاع عند الشاشات الأفقية */
    }
  }

  /* مثال لمحتوى فوق الفيديو */
  .slide_video_overlay {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    font-family: Arial, sans-serif;
    background: rgba(0,0,0,0.4);
    padding: 20px;
    border-radius: 10px;
  }
  
  
</style>