@extends('frontend::layouts.master')

@section('title', 'รายละเอียดคลิปการสอน | ศูนย์ความรู้ อ.อ๊อบ')

@section('content')
<main class="pt-[80px] sm:pt-[88px] bg-gradient-to-b from-white to-kru-light-strong min-h-screen">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    <a href="javascript:history.back()"
      class="inline-flex items-center gap-2 text-kru-blue hover:underline text-sm font-medium mb-8"
    >
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
      </svg>
      ย้อนกลับไปหน้าคลิปการสอน
    </a>
    <div class="overflow-hidden border-2 border-gray-200 rounded-xl shadow-lg bg-white">
      @php
        if (!empty($video['youtube'])) {
          $youtubeEmbedUrl = 'https://www.youtube.com/embed/' . rawurlencode((string) $video['youtube']);
        } elseif ($youtubeSource !== '') {
          if (str_contains($youtubeSource, 'youtube.com/embed/')) {
            $youtubeEmbedUrl = $youtubeSource;
          } elseif (preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/)([A-Za-z0-9_-]{6,})/', $youtubeSource, $matches) === 1) {
            $youtubeEmbedUrl = 'https://www.youtube.com/embed/' . $matches[1];
          }
        }
      @endphp

      <div class="relative aspect-video w-full flex items-center justify-center text-white overflow-hidden bg-black">
        @if($youtubeEmbedUrl !== '')
          <iframe
            src="{{ $youtubeEmbedUrl }}"
            title="{!! $video['name'] ?? '' !!}"
            class="absolute inset-0 w-full h-full"
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin"
            allowfullscreen
          ></iframe>
        @else
          <img
            src="{{ asset($video['coverImage'] ?? 'modules/frontend/images/mockup/cource-videos-01.png') }}"
            alt="{!! $video['name'] ?? '' !!}"
            class="absolute inset-0 w-full h-full object-cover"
            loading="lazy"
            onerror="this.style.display='none'"
          />
        @endif
      </div>

      <div class="p-6 sm:p-8">
        <div class="flex flex-wrap items-center gap-3 mb-4">
          <h1 class="text-2xl sm:text-3xl font-bold text-kru-dark">
            {!! $video['name'] ?? '' !!}
          </h1>
        </div>

        <div class="flex flex-wrap gap-3 mb-6 text-sm text-gray-600">
          <div class="flex items-center gap-2">
            <svg class="w-4 h-4 text-kru-blue flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
            <span>{!! $video['categories'][0]['name'] ?? '' !!}</span>
          </div>
        </div>

        <p class="text-gray-700 mb-6">{!! $video['desc'] ?? '' !!}</p>

        <!-- Start Text Editor -->
        <div class="text-editor-reset">
          {!! $video['detail'] ?? '' !!}
        </div>
      </div>
    </div>
  </div>
</main>
@endsection