@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="#" class="hover:text-red-600">Home</a></li>
                    <li><span class="mx-2">/</span></li>
                    <li class="text-red-600 font-semibold">Videos</li>
                </ol>
            </nav>

            <!-- Category Title -->
            <h1 class="text-3xl font-bold mt-1 text-gray-900"><span class="rounded text-black">Videos</span></h1>

        </div>
    </section>

    <section class="max-w-7xl mx-auto px-4 py-10">

        <div class="flex flex-col lg:flex-row gap-6">
            <!-- Main Articles -->
            <div class="lg:w-2/3 flex flex-col gap-4">

                <!-- 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="md:h-auto 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]">
                                    <h2 class="text-2xl/6 font-bold text-gray-800 hover:text-red-600 mb-2">
                                        {{ $Photos->title }}</h2>
                                    <p class="text-xs text-gray-500 my-2"><i class="fa-solid fa-user"></i>exchange4media
                                        Staff &nbsp;&nbsp;<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 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"
                                        href="{{ url('') }}/videos/{{ Str::slug($Photos->title) }}-{{ $Photos->yid }}.html"><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="https://www.facebook.com/sharer.php?u={{ url('') }}/videos/{{ Str::slug($Photos->title) }}-{{ $Photos->yid }}.html&utm_source=desktop&utm_medium=facebook&utm_campaign=facebook&utm_term=facebook&utm_content=facebook"
                                        class="text-gray-500 hover:text-blue-600" aria-label="Share on Facebook"><i
                                            class="fab fa-facebook-f"></i></a>
                                    <a href="https://twitter.com/intent/tweet?url={{ url('') }}/videos/{{ Str::slug($Photos->title) }}-{{ $Photos->yid }}.html&text={{ $Photos->title }}
                                                        &via=e4mtweets&utm_source=desktop&utm_medium=twitter&utm_campaign=twitter&utm_term=twitter&utm_content=twitter"
                                        class="text-gray-500 hover:text-black" aria-label="Share on Twitter"><i
                                            class="fab fa-x-twitter"></i></a>
                                    <a href="https://www.linkedin.com/shareArticle?mini=true
                                                                                                   &url={{ url('') }}/videos/{{ Str::slug($Photos->title) }}-{{ $Photos->yid }}.html
                                                                                                   &title={{ $Photos->title }}
                                                                                                   &summary={{ $Photos->title }}
                                                                                                   &source=exchange4media.com&utm_source=desktop&utm_medium=linkedin&utm_campaign=linkedin&utm_term=linkedin&utm_content=linkedin"
                                        class="text-gray-500 hover:text-blue-700" aria-label="Share on LinkedIn"><i
                                            class="fab fa-linkedin-in"></i></a>
                                    <a href="https://api.whatsapp.com/send?text={{ $Photos->title }}%0A{{ url('') }}/videos/{{ Str::slug($Photos->title) }}-{{ $Photos->yid }}.html&utm_source=desktop&utm_medium=whatsapp&utm_campaign=whatsapp&utm_term=whatsapp&utm_content=whatsapp"
                                        class="text-gray-500 hover:text-green-500" aria-label="Share on WhatsApp"><i
                                            class="fab fa-whatsapp"></i></a>
                                    <a href="mailto:?subject={{ $Photos->title }}- exchange4media&body=Hi,%0A
                                                                                                    I thought you'd like this:%0A%0A
                                                                                                    {{ url('') }}/videos/{{ Str::slug($Photos->title) }}-{{ $Photos->yid }}.html&utm_source=desktop&utm_medium=email&utm_campaign=email&utm_term=email&utm_content=email"
                                        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": "WebPage",
  "name": "Video News, Most Searches and Trending Video, Video Gallery - Exchange4media",
  "description": "Exchange4media provides latest and breaking news about advertising agencies, marketing, media, digital, television, ads, brand, print ad, radio marketing updates or trending topics.",
  "url": "https://www.exchange4media.com/videos.html",
  "publisher": {
    "@@type": "Organization",
    "name": "Exchange4media",
    "url": "https://www.exchange4media.com/",
    "logo": {
      "@@type": "ImageObject",
      "contentUrl": "https://storage.googleapis.com/news-photo/static-images/logo.png"
    }
  }
}
</script>

    <script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "CollectionPage",
  "name": "Exchange4Media - Videos",
  "description": "Watch the latest Exchange4Media videos on advertising, marketing, media, and people movement updates.",
  "url": "{{ url('videos.html') }}",
  "mainEntity": {
    "@@type": "ItemList",
    "itemListElement": [
      @foreach($ArrlistingVideos->take(20) as $index => $video)
      {
        "@@type": "VideoObject",
        "position": {{ $index + 1 }},
        "name": {!! json_encode($video->title) !!},
        "description": {!! json_encode($video->description ?? '') !!},
        "thumbnailUrl": "{{ Config::get('constants.Sitethumbnail') }}{{ Config::get('constants.VIDEO_THUMB_DIR') }}{{ $video->vid }}.jpg",
        "uploadDate": "{{ \Carbon\Carbon::parse($video->created_at)->toIso8601String() }}",
        "contentUrl": "{{ url('videos') }}/{{ \Illuminate\Support\Str::slug($video->title) }}-{{ $video->yid }}.html"
      }@if(!$loop->last),@endif
      @endforeach
    ]
  }
}
</script>

    <script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@@type": "ListItem",
      "position": 1,
      "item": {
        "@@id": "https://www.exchange4media.com/",
        "name": "Home"
      }
    },
    {
      "@@type": "ListItem",
      "position": 2,
      "item": {
        "@@id": "{{ Request::url() }}",
        "name": "Videos"
      }
    }
  ]
}
</script>
@endsection