@extends('themes.one.master')

@php
    $pageInfo = [];
    $pageTitle = '';
    foreach($pageSettings as $page){
        if($page['page'] == $currentPageSlug){
            $pageInfo = $page;
            $pageTitle = transField($pageInfo, 'title') ?? __('Gallery');
        }
    }
@endphp

@section('title') {{ $pageTitle }} @endsection

@section('content')
@php
    use Illuminate\Support\Str;
    use Carbon\Carbon;
@endphp

{{-- ================================ Header ================================ --}}
@isset($banner)
<section class="inner-banner bg-overlay-black-70" style="background-image: url('{{ $banner['image'] }}');">
  <div class="container">
    <div class="row d-flex justify-content-center">
      <div class="col-md-12">
        <div class="text-center">
          <h1 class="text-white">{{ transField($banner, 'title') }}</h1>
        </div>
        <div class="d-flex justify-content-center ">
          <ol class="breadcrumb mb-0 p-0">
            <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ __('Home') }}</a></li>
            <li class="breadcrumb-item active"><span>{{ $pageTitle }}</span></li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</section>
@endisset

{{-- ================================ Articles ================================ --}}
@if (page_enabled('blog') && (($articals instanceof \Illuminate\Support\Collection && $articals->isNotEmpty()) || (!($articals instanceof \Illuminate\Support\Collection) && !empty($articals))))
@php
  $blogMeta = ($pageSettingsBySlug ?? collect())->get('creativity');
  $title    = data_get($blogMeta, 'title', __('Latest Creativity'));
  $descHtml = data_get($blogMeta, __('Description'));
@endphp

<section class="space-ptb position-relative">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-7 col-md-10 text-center">
        <div class="section-title">
          <h2 class="title">{{ $pageTitle }}</h2>
          <p class="mb-0">{!! $descHtml !!}</p>
        </div>
      </div>
    </div>

    <div class="row">
      @forelse ($articals as $post)
        @php
          $date      = $post->date ?? null;
          $fromTime  = $post->from_time ?? null;
          $toTime    = $post->to_time ?? null;
          $dateLabel = $date ? Carbon::parse($date)->format('d M, Y') : '';
          $fromLabel = $fromTime ? Carbon::parse($fromTime)->format('g:i A') : '';
          $toLabel   = $toTime   ? Carbon::parse($toTime)->format('g:i A')   : '';

          $i = $loop->index;
          $mtBase = $loop->first ? '' : 'mt-4';
          $mtMd   = $i === 1 ? ' mt-md-0' : '';
          $mtLg   = $i === 2 ? ' mt-lg-0' : '';
          $colCls = "col-lg-4 col-md-6 {$mtBase}{$mtMd}{$mtLg}";

          $img   = $post->image ?? null;
          $embed = $post->embed_url ?? null;

          // Normalize YouTube links to /embed/<ID> (safe for any pasting)
          if ($embed) {
            if (preg_match('~youtu\.be/([^?&]+)~i', $embed, $m)) {
              $embed = 'https://www.youtube.com/embed/' . $m[1];
            } elseif (preg_match('~watch\?v=([^&]+)~i', $embed, $m)) {
              $embed = 'https://www.youtube.com/embed/' . $m[1];
            }
          }
        @endphp

        <div class="{{ $colCls }}">
          <div class="blog">
            <div class="blog-image">

              {{-- A) Image + Video => open in custom lightbox --}}
              @if ($img && $embed)
                <div class="position-relative border-radius overflow-hidden">
                  <img class="img-fluid w-100" src="{{ $img }}" alt="{{ $post->title }}">
                  <a href="#"
                     class="btn btn-play-overlay js-open-video"
                     data-video-src="{{ $embed }}"
                     aria-label="Play video" title="Play video">
                    <i class="fas fa-play"></i>
                  </a>
                </div>

              {{-- B) Only Video => show inline --}}
              @elseif (!$img && $embed)
                <div class="ratio ratio-16x9 border-radius overflow-hidden">
                  <iframe src="{{ $embed }}"
                          title="{{ $post->title }}"
                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                          allowfullscreen loading="lazy"
                          referrerpolicy="strict-origin-when-cross-origin"
                          class="w-100 h-100 border-0"></iframe>
                </div>

              {{-- C) Only Image / none --}}
              @else
                @if ($img)
                  <img class="img-fluid border-radius" src="{{ $img }}" alt="{{ $post->title }}">
                @else
                  <div class="border-radius bg-light d-flex align-items-center justify-content-center" style="height:220px;">
                    <span class="text-muted">{{ __('No media') }}</span>
                  </div>
                @endif
              @endif
            </div>

            <div class="blog-content pt-4">
              <h5 class="blog-title mb-3">
                <a href="{{ url('/creativity-details/' . $post->id) }}">{{ transField($post, 'title') }}</a>
              </h5>

              <div class="blog-meta mb-0">
                <ul class="list-unstyled mb-0 d-flex">
                  @if ($post->date)
                    <li class="mr-3">
                      <a href="#"><i class="fas fa-calendar-alt pr-1"></i> {{ $dateLabel }}</a>
                    </li>
                  @endif
                  @if ($post->from_time || $post->to_time)
                    <li><i class="fas fa-clock pr-1"></i> {{ $fromLabel }} - {{ $toLabel }}</li>
                  @endif
                </ul>
              </div>

              <p class="mt-3">{{ Str::words(strip_tags(transField($post, 'short_desc')), 28, '…') }}</p>
            </div>
          </div>
        </div>
      @empty
        <div class="col-12"><p class="text-center mb-0">{{ __('No articles found') }}.</p></div>
      @endforelse
    </div>

    @if ($articals->hasPages())
      <div class="row justify-content-center mt-4">
        <div class="col-lg-8 text-center">
          <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center mb-0">
              @if ($articals->onFirstPage())
                <li class="page-item disabled"><a class="page-link rounded-left" href="#" tabindex="-1">{{ __('Previous') }}</a></li>
              @else
                <li class="page-item"><a class="page-link rounded-left" href="{{ $articals->previousPageUrl() }}">{{ __('Previous') }}</a></li>
              @endif

              @for ($page = 1; $page <= $articals->lastPage(); $page++)
                <li class="page-item {{ $page == $articals->currentPage() ? 'active' : '' }}">
                  <a class="page-link" href="{{ $articals->url($page) }}">{{ $page }}</a>
                </li>
              @endfor

              @if ($articals->hasMorePages())
                <li class="page-item"><a class="page-link rounded-right" href="{{ $articals->nextPageUrl() }}">{{ __('Next') }}</a></li>
              @else
                <li class="page-item disabled"><a class="page-link rounded-right" href="#">{{ __('Next') }}</a></li>
              @endif
            </ul>
          </nav>
        </div>
      </div>
    @endif
  </div>
</section>
@endif

{{-- ================================ CTA ================================ --}}
@include('themes.one.sections.subscribe')

{{-- ================================ Lightweight Video Lightbox ================================ --}}
<div id="mediaLightbox" class="media-lightbox" aria-hidden="true" role="dialog" aria-label="Video dialog">
  <div class="media-lightbox__backdrop js-close-video"></div>
  <div class="media-lightbox__dialog" role="document">
    <button class="media-lightbox__close js-close-video" aria-label="Close video">&times;</button>
    <div class="media-lightbox__body">
      <div id="mediaLightboxMount" class="w-100 h-100"></div>
    </div>
  </div>
</div>

{{-- ================================ Styles ================================ --}}
<style>
  .ratio { position: relative; width: 100%; }
  .ratio-16x9 { padding-top: 56.25%; }
  .ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
  .btn-play-overlay {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(0,0,0,.35);
    color: #fff; font-size: 32px;
    text-decoration: none;
    transition: background .2s ease;
  }
  .btn-play-overlay:hover { background: rgba(0,0,0,.5); }

  /* Lightbox */
  .media-lightbox { position: fixed; inset: 0; display: none; z-index: 1055; }
  .media-lightbox.is-open { display: block; }
  .media-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
  .media-lightbox__dialog {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: min(960px, 92vw); aspect-ratio: 16 / 9; background: #000; border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5); overflow: hidden;
  }
  .media-lightbox__close {
    position: absolute; right: 6px; top: 4px; z-index: 3;
    width: 36px; height: 36px; border: none; background: transparent;
    color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
  }
  .media-lightbox__body { position: absolute; inset: 0; }
  @supports not (aspect-ratio: 16 / 9) {
    .media-lightbox__dialog { width: min(960px, 92vw); height: calc((min(960px, 92vw)) * 9 / 16); }
  }
</style>

{{-- ================================ Scripts (framework-free) ================================ --}}
<script>
(function () {
  var lightbox = document.getElementById('mediaLightbox');
  var mount    = document.getElementById('mediaLightboxMount');

  if (!lightbox || !mount) return;

  function openLightbox(src) {
    // ensure autoplay=1
    var url = src + (src.indexOf('?') > -1 ? '&' : '?') + 'autoplay=1';

    // Cleanup first
    closeLightbox();

    // Build iframe fresh
    var iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.title = 'Video';
    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
    iframe.allowFullscreen = true;
    iframe.loading = 'eager';
    iframe.referrerPolicy = 'strict-origin-when-cross-origin';
    iframe.className = 'w-100 h-100 border-0';

    mount.appendChild(iframe);
    lightbox.classList.add('is-open');

    // lock scroll
    document.documentElement.style.overflow = 'hidden';
    document.body.style.overflow = 'hidden';
  }

  function closeLightbox() {
    // Remove iframe node => GUARANTEED stop
    mount.innerHTML = '';
    lightbox.classList.remove('is-open');

    // unlock scroll
    document.documentElement.style.overflow = '';
    document.body.style.overflow = '';
  }

  // Open on any play overlay
  document.addEventListener('click', function (e) {
    var trigger = e.target.closest('.js-open-video[data-video-src]');
    if (!trigger) return;
    e.preventDefault();

    var src = trigger.getAttribute('data-video-src');
    if (!src) return;

    openLightbox(src);
  });

  // Close on backdrop, close button, or Escape
  document.addEventListener('click', function (e) {
    if (e.target.closest('.js-close-video')) {
      e.preventDefault();
      closeLightbox();
    }
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && lightbox.classList.contains('is-open')) {
      closeLightbox();
    }
  });

})();
</script>
@endsection