@extends('themes.one.master')

@section('title')
  {{ __('Creativity Details') }}
@endsection

@section('content')
@php
    use Carbon\Carbon;

    $date     = $artical['date'] ?? null;
    $fromTime = $artical['from_time'] ?? null;
    $toTime   = $artical['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')   : '';

    $img   = $artical['image']      ?? null;
    $embed = $artical['embed_url']  ?? null;

    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

<section class="space-ptb position-relative">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 mb-4 mb-md-0">
        <div class="blog">
          <div class="blog-image">
            @if ($img && $embed)
              <div class="position-relative border-radius overflow-hidden">
                <img class="img-fluid w-100" src="{{ $img }}" alt="{{ $artical['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>

            @elseif (!$img && $embed)
              <div class="ratio ratio-16x9 border-radius overflow-hidden">
                <iframe src="{{ $embed }}"
                        title="{{ $artical['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>

            @else
              @if ($img)
                <img class="img-fluid border-radius" src="{{ $img }}" alt="{{ $artical['title'] }}">
              @endif
            @endif
          </div>

          <div class="blog-content border-0 mt-4">
            <h5 class="blog-title mb-3">{{ transField($artical, 'title') }}</h5>

            @if($dateLabel || $fromLabel || $toLabel)
            <div class="blog-meta mb-0">
              <ul class="list-unstyled mb-0 d-flex flex-wrap">
                @if ($dateLabel)
                  <li class="mr-3"><i class="fas fa-calendar-alt"></i> {{ $dateLabel }}</li>
                @endif
                @if ($fromLabel || $toLabel)
                  <li><i class="fas fa-clock"></i> {{ $fromLabel }}@if($fromLabel || $toLabel) - @endif{{ $toLabel }}</li>
                @endif
              </ul>
            </div>
            @endif

            <div class="mt-3">{!! transField($artical, 'long_desc') !!}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@include('themes.one.sections.subscribe')

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

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


<script>
(function () {
  var lightbox = document.getElementById('mediaLightbox');
  var mount    = document.getElementById('mediaLightboxMount');

  if (!lightbox || !mount) return;

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

    closeLightbox();

    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');

    document.documentElement.style.overflow = 'hidden';
    document.body.style.overflow = 'hidden';
  }

  function closeLightbox() {
    mount.innerHTML = '';
    lightbox.classList.remove('is-open');

    document.documentElement.style.overflow = '';
    document.body.style.overflow = '';
  }

  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);
  });

  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