@extends('layouts.base')
@section('title')
Video Gallery
@endsection

@php
function getYoutubeEmbedUrl($url) {
preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&]+)/', $url, $matches);
return isset($matches[1]) ? 'https://www.youtube.com/embed/' . $matches[1] : null;
}
@endphp

@section('content')
<div class="container-fluid p-0" style="background-image: url('https://static.vecteezy.com/system/resources/previews/005/240/727/original/abstract-background-design-white-and-gray-abstract-white-pattern-box-free-vector.jpg'); background-size:cover; background-repeat: no-repeat;">

  <div class="row">
    <div class="col-sm-12 my-auto text-center backimghead"
      style="background: linear-gradient(rgba(84, 51, 34, 0.78),rgba(84, 51, 34, 0.788)),url('https://png.pngtree.com/thumb_back/fh260/background/20240526/pngtree-asian-young-university-students-studying-together-sitting-at-desk-in-library-image_15731485.jpg') center/cover; height: 430px;">
      <h2 style="padding-top: 210px; color:white;" class="fw-bold text-uppercase heading21 headerinner">
        Video
      </h2>
      <span style="color:white; font-family: Lexend, serif;" class="fw-bold subheading">
        <a href="{{ asset('/') }}" style="text-decoration: none; color:white;">HOME</a>&nbsp;/&nbsp;
        <a href="javascript:void(0)" style="color:white; text-decoration: none;" class="text-uppercase">
          Videos
        </a>
      </span>
    </div>
  </div>

  <div class="container py-5" style="font-family:'Poppins', sans-serif;">
    <div class="text-center mb-4">
      <h2 class="fw-bold text-uppercase" style="color:#ff6600;">Our Videos</h2>
      <div class="mx-auto" style="width:80px;height:3px;background:#ff6600;border-radius:10px;"></div>
    </div>

 <div class="row g-4">
      @forelse($videos as $video)
      @php
      $embedUrl = !empty($video->video_url) ? getYoutubeEmbedUrl($video->video_url) : null;
      @endphp

      <div class="col-md-6 col-lg-4">
        <div class="card shadow-sm rounded-4 overflow-hidden h-100" style="border:1px dashed #ff6600;">
          <div class="ratio ratio-16x9 bg-dark">
            @if($embedUrl)
            <iframe src="{{ $embedUrl }}" title="YouTube video player" allowfullscreen></iframe>
            @else
            <div class="d-flex align-items-center justify-content-center text-white">
              Invalid YouTube Link
            </div>
            @endif
          </div>


          <p class="mb-1 fw-bold text-secondary ps-2">
            {{ $video->title ?? 'Untitled Video' }}
          </p>

          <p class="mb-0 fw-bold ps-2" style="color:#ff6600; font-size:16px;">
            {{ $video->description ?? '' }}
          </p>
        </div>
      </div>
      @empty
      <div class="col-12 text-center">
        <p class="text-muted">No video gallery data found.</p>
      </div>
      @endforelse
    </div>

  </div>
</div>

@endsection