@extends('layouts.app')
@section('content')
    <section class="w-full bg-gray-100">
        <div class="max-w-7xl mx-auto px-4 py-4">
            <nav class="text-sm mb-0 text-black" aria-label="Breadcrumb">
                <ol class="list-reset flex">
                    <li><a href="{{ url('/') }}" class="hover:text-red-600">Home</a></li>
                    <li><span class="mx-2">/</span></li>
                    <li class="text-red-600 font-semibold">Watch Video</li>
                </ol>
            </nav>
            <!-- Category Title -->
            <h1 class="text-3xl font-bold mt-1 text-gray-900"><span class="rounded text-black">Watch Video</span>
            </h1>
        </div>
    </section>


    <section class="max-w-7xl mx-auto px-4 py-10">
        <!-- Breadcrumb -->
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- Main Articles -->
            <div class="lg:w-2/3 flex flex-col gap-4">

                <div class="flex flex-col items-center relative border p-3">
                    <h2 class="text-2xl/7 font-bold text-gray-800 hover:text-red-600 mb-2">{{ $ArrViewVideo[0]->title }}
                    </h2>
                    <!-- Main Image -->
                    <div class="relative w-full">
                        <iframe width="100%" height="400"
                            src="https://www.youtube.com/embed/{{ $ArrViewVideo[0]->vid }}?autoplay=1" frameborder="0"
                            allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
                    </div>


                    <div
                        class="flex w-full flex-col lg:flex-row items-center justify-between px-3 py-2 bg-black rounded-md">
                        <!-- Left Side: Date -->
                        <div class="flex items-center gap-3">
                            <img src="https://exchange4media.gumlet.io/news-photo/album/defaultnew-old.png" alt="Author"
                                class="w-12 h-12 rounded-full object-cover">
                            <div>
                                <p class="font-semibold text-white">by e4m Staff</p>
                                <p class="text-gray-100 text-xs">
                                    @php
                                        $publishDate = \Carbon\Carbon::parse($ArrViewVideo[0]->publish_date);
                                        $display = $publishDate->isBefore(now()->subWeek())
                                            ? $publishDate->format('d-F-Y')
                                            : $publishDate->diffForHumans();
                                    @endphp

                                    {{ $display }}

                                </p>
                            </div>
                        </div>

                        <!-- Right Side: Social Icons -->
                        <div class="flex items-center lg:space-x-3 space-x-1 text-gray-600">
                            <!-- Facebook -->
                            <button type="button"
                                class="text-white bg-[#3b5998] hover:bg-[#3b5998]/90 focus:ring-4 focus:outline-none focus:ring-[#3b5998]/50 font-medium rounded-lg text-sm px-2 py-1 text-center inline-flex items-center dark:focus:ring-[#3b5998]/55 me-0 mb-2">
                                <i class="fa-brands fa-facebook-f me-1"></i>
                                Share
                            </button>
                            <!-- X -->
                            <button type="button"
                                class="text-white bg-[#424242] hover:bg-[#424242]/90 focus:ring-4 focus:outline-none focus:ring-[#424242]/50 font-medium rounded-lg text-sm px-2 py-1 text-center inline-flex items-center dark:focus:ring-[#3b5998]/55 me-0 mb-2">
                                <i class="fa-brands fa-x-twitter me-1"></i>
                                Share
                            </button>
                            <!-- LinkedIn -->
                            <button type="button"
                                class="text-white bg-[#0a66c2] hover:bg-[#084b8f]/90 focus:ring-4 focus:outline-none focus:ring-[#084b8f]/50 font-medium rounded-lg text-sm px-2 py-1 text-center inline-flex items-center dark:focus:ring-[#084b8f]/55 me-0 mb-2">
                                <i class="fa-brands fa-linkedin-in me-1"></i>
                                Share
                            </button>

                            <!-- WhatsApp -->
                            <button type="button"
                                class="text-white bg-green-600 hover:bg-[#2cc213]/90 focus:ring-4 focus:outline-none focus:ring-[#2cc213]/50 font-medium rounded-lg text-sm px-2 py-1 text-center inline-flex items-center dark:focus:ring-[#2cc213]/55 me-0 mb-2">
                                <i class="fa-brands fa-whatsapp me-1"></i>
                                Share
                            </button>
                            <!-- Email -->
                            <button type="button"
                                class="text-white bg-gray-600 hover:bg-[#2b312a]/90 focus:ring-4 focus:outline-none focus:ring-[#2b312a]/50 font-medium rounded-lg text-sm px-2 py-1 text-center inline-flex items-center dark:focus:ring-[#2b312a]/55 me-0 mb-2">
                                <i class="fa-regular fa-envelope me-1"></i>
                                Share
                            </button>
                        </div>

                    </div>


                </div>


                <hr>




                <h2 id="latest-articles" class="text-2xl font-bold uppercase mt-3">
                    <span class="border-b-4 border-red-600">LATEST</span> VIDEO
                </h2>


                <!-- Article Card -->
                @foreach ($ArrlistingVideos as $Photos)
                    <article class="bg-white flex flex-col lg:flex-col ">
                        <div class="flex flex-col lg:flex-row border hover:shadow-lg transition overflow-hidden rounded-xl">
                            <a href="{{ url('') }}/videos/{{ Str::slug($Photos->title) }}-{{ $Photos->yid }}.html"
                                class="flex-shrink-0 w-full relative lg:w-1/3"> <img
                                    src="{{ Config::get('constants.Sitethumbnail') }}{{ Config::get('constants.VIDEO_THUMB_DIR') }}{{ $Photos->vid }}.jpg"
                                    alt="Article Image"
                                    class="w-full h-48 lg:h-48 object-cover rounded-t-xl lg:rounded-l-xl lg:rounded-tr-none transition-transform duration-300 hover:scale-105">
                                <span class="w-18 h-18 absolute bottom-0 left-0 bg-red-700 text-white py-1 px-3"><i
                                        class="fa-solid fa-play"></i></span>
                            </a>
                            <div class="px-3 py-1 flex flex-col justify-between flex-1">
                                <div class="text-[1.1rem]">
                                    <a href="{{ url('') }}/videos/{{ Str::slug($Photos->title) }}-{{ $Photos->yid }}.html"
                                        class="flex-shrink-0 w-full relative lg:w-1/3">
                                        <h2 class="text-2xl/6 font-bold text-gray-800 hover:text-red-600 mb-2">
                                            {{ $Photos->title }}</h2>
                                    </a>
                                    <p class="text-xs text-gray-500 my-2"><i class="fa-solid fa-user"></i> e4m Staff <i
                                            class="fa-regular fa-clock"></i>
                                        @if (\Carbon\Carbon::parse($Photos->created_at)->diffInWeeks() > 1)
                                            {{ \Carbon\Carbon::parse($Photos->created_at)->format('d-F-Y') }}
                                        @else
                                            {{ \Carbon\Carbon::parse($Photos->created_at)->diffForHumans() }}
                                        @endif
                                    </p>

                                    <a href="{{ url('') }}/videos/{{ Str::slug($Photos->title) }}-{{ $Photos->yid }}.html"
                                        class="text-white text-base bg-black box-border border border-transparent hover:bg-red-600 focus:ring-4 focus:warning-subtle shadow-xs font-semibold leading-5 rounded-full uppercase px-4 py-2 mt-2 focus:outline-none"><i
                                            class="fa-solid fa-play"></i> View Video
                                    </a>
                                </div>

                                <!-- Social Share -->
                                <div class="flex space-x-3 mt-2">
                                    <i class="fa-solid fa-share"></i>
                                    <a href="#" class="text-gray-500 hover:text-blue-600"
                                        aria-label="Share on Facebook"><i class="fab fa-facebook-f"></i></a>
                                    <a href="#" class="text-gray-500 hover:text-black"
                                        aria-label="Share on Twitter"><i class="fab fa-x-twitter"></i></a>
                                    <a href="#" class="text-gray-500 hover:text-blue-700"
                                        aria-label="Share on LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                                    <a href="#" class="text-gray-500 hover:text-green-500"
                                        aria-label="Share on WhatsApp"><i class="fab fa-whatsapp"></i></a>
                                    <a href="#" class="text-gray-500 hover:text-blue-800"
                                        aria-label="Share on WhatsApp"><i class="fa-solid fa-envelope"></i></a>
                                </div>
                            </div>
                        </div>
                    </article>

                    <hr>
                @endforeach

            </div>

            <!-- Sidebar -->
            @include('article.rightsidebar')
        </div>
    </section>

    <script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "VideoObject",
  "name": "{{$ArrViewVideo[0]->title}}",
  "thumbnailUrl": "{{ Config::get('constants.Sitethumbnail') }}{{ Config::get('constants.VIDEO_THUMB_DIR') }}{{ $ArrViewVideo[0]->vid }}.jpg",
  "uploadDate": "{{ \Carbon\Carbon::parse($ArrViewVideo[0]->created_at)->toIso8601String() }}",
  "contentUrl": "{{ Request::url() }}",
  "embedUrl": "https://www.youtube.com/embed/{{ $ArrViewVideo[0]->vid }}",
  "publisher": {
    "@@type": "Organization",
    "name": "Exchange4Media",
    "logo": {
      "@@type": "ImageObject",
      "url": "https://www.exchange4media.com/news-photo/static-images/logo-new.png",
      "width": 200,
      "height": 60
    }
  }
}
</script>


    <script type="application/ld+json">
            {
                "@@context": "https://schema.org",
                "@@type": "BreadcrumbList",
                "itemListElement": [{
                    "@@type": "ListItem",
                    "position": "1",
                    "item": {
                        "@@id": "{{ env('APP_URL') }}",
                        "name": "Home"
                    }
                    }, {
                    "@@type": "ListItem",
                    "position": "2",
                    "item": {
                        "@@id": "{{ url('') }}/videos.html",
                        "name": "Videos"
                    }
                    },{
                    "@@type": "ListItem",
                    "position": "3",
                    "item": {
                        "@@id": "{{ url('') }}/videos/{{ Str::slug($ArrViewVideo[0]->title) }}-{{ $ArrViewVideo[0]->yid }}.html",
                        "name": "{{ $ArrViewVideo[0]->title }}"
                    }
                }]
            }
            </script>
@endsection