@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">Photo Gallery</li>
                </ol>
            </nav>

            <!-- Category Title -->
            <h1 class="text-3xl font-bold mt-1 text-gray-900"><span class="rounded text-black">Photo Gallery</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">

                <!-- Article Card -->
                @if (count($ArrlistingPhotos) == 0)
                    <p class="text-gray-500">No photo galleries available at the moment. Please check back later.</p>
                @endif
                @foreach ($ArrlistingPhotos 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('') }}/photo/{{ Str::slug($Photos->title) }}-{{ $Photos->id }}.html"
                                class="flex-shrink-0 w-full relative lg:w-1/3"> <img
                                    src="{{ Config::get('constants.Sitethumbnail') }}{{ Config::get('constants.ALBUM_IMAGE_DIR') }}{{ $Photos->photos[0]->photopath }}"
                                    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-regular fa-image"></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/7 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('') }}/photo/{{ Str::slug($Photos->title) }}-{{ $Photos->id }}.html"><i
                                            class="fa-solid fa-play"></i> View Gallery</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>
                @endforeach

                <hr>


            </div>

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

        </div>
    </section>

    <script type="application/ld+json">
    {
    "@@context": "http://schema.org",
    "@@type": "WebPage",
    "name": "Photo Gallery - Exchange4media",
    "description": "Exchange4media photo, image, picture gallery page india.",
    "url" : "https://www.exchange4media.com/photos.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": "http://schema.org",
    "@@type": "BreadcrumbList", "itemListElement":
    [{ "@@type": "ListItem", "position": "1",
    "item": { "@@id": " https://www.exchange4media.com/ ", "name": "Home" } }
    ,{ "@type": "ListItem", "position": "2",
    "item": { "@@id": "https://www.exchange4media.com/photos.html",
    "name": "Photo Gallery"
    } }] }
</script>
    <script type="application/ld+json">
        {
        "@@context": "https://schema.org",
        "@@type": "CollectionPage",
        "name": "Photos - Exchange4media",
        "url": "{{ url('photos.html') }}",
        "description": "Latest photo stories and galleries covering news, events, and marketing campaigns.",
        "mainEntity": {
            "@@type": "ItemList",
            "itemListElement": [
            @foreach($ArrlistingPhotos->take(20) as $index => $photo)
                {
                "@@type": "ListItem",
                "position": {{ $index + 1 }},
                "url": "{{ url('photo/' . Str::slug($photo->title) . '-' . $photo->id . '.html') }}",
                "name": "{{ addslashes($photo->title) }}",
                "image": "{{ Config::get('constants.Sitethumbnail') }}{{ Config::get('constants.ALBUM_IMAGE_DIR') }}{{ $photo->photos[0]->photopath }}"
                }@if(!$loop->last),@endif
            @endforeach
            ]
        }
        }
</script>
@endsection