@extends('layouts.app')
@section('content')
    {{-- TOP SECTION --}}
    <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">Photo Gallery</li>
                </ol>
            </nav>

            <h1 class="text-3xl font-bold mt-1 text-gray-900">
                <span class="rounded text-black">Photo Gallery</span>
            </h1>
        </div>
    </section>


    {{-- MAIN CONTENT --}}
    <section class="max-w-7xl mx-auto px-4 py-10">
        <div class="flex flex-col lg:flex-row gap-6">

            {{-- MAIN AREA --}}
            <div class="lg:w-2/3 flex flex-col gap-4">

                {{-- Title --}}
                <h2 class="text-2xl/7 font-bold text-gray-800 hover:text-red-600 mb-2">
                    {{ preg_replace('/[^A-Za-z0-9_]/', ' ', $ArrViewPhotos->title) }}
                </h2>

                {{-- MAIN IMAGE BLOCK --}}
                <div class="flex flex-col items-center relative border p-3">

                    {{-- MAIN PHOTO --}}
                    @foreach ($ArrViewPhotos->photos as $key => $photo)
                        @if ($key == 0)
                            <div class="relative w-full">
                                <img id="mainPhoto"
                                    src="{{ Config::get('constants.Sitethumbnail') }}{{ Config::get('constants.ALBUM_IMAGE_DIR') }}{{ $photo->photopath }}"
                                    alt="{{ $photo->phototitle }}"
                                    class="w-full h-auto object-cover rounded-xl shadow transition-all duration-500 ease-in-out">
                            </div>
                        @endif
                    @endforeach


                    {{-- THUMBNAILS --}}
                    <div class="relative w-full mt-4">

                        <button id="thumbPrev"
                            class="absolute left-0 top-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-70 z-20">
                            ❮
                        </button>

                        <div class="overflow-hidden">
                            <div id="thumbSlider" class="flex gap-3 transition-transform duration-500 ease-in-out">
                                @foreach ($ArrViewPhotos->photos as $key => $photo)
                                    @if ($key != 0)
                                        <img src="{{ Config::get('constants.Sitethumbnail') }}{{ Config::get('constants.ALBUM_IMAGE_DIR') }}{{ $photo->photopath }}"
                                            alt="{{ $photo->phototitle }}"
                                            class="thumb w-24 h-16 object-cover rounded-lg cursor-pointer border-2 transition flex-shrink-0">
                                    @endif
                                @endforeach
                            </div>
                        </div>

                        <button id="thumbNext"
                            class="absolute right-0 top-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-70 z-20">
                            ❯
                        </button>
                    </div>


                    {{-- AUTHOR + DATE + SHARE --}}
                    <div
                        class="flex w-full flex-col lg:flex-row items-center justify-between px-3 py-2 bg-black rounded-md">

                        {{-- LEFT - AUTHOR & 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">e4m Staff</p>

                                @php
                                    $date = \Carbon\Carbon::parse($ArrViewPhotos->created_at);
                                @endphp

                                <p class="text-gray-100 text-xs">
                                    {{ $date->diffInWeeks() > 1 ? $date->format('M d, Y h:i A') : $date->diffForHumans() }}
                                </p>
                            </div>
                        </div>

                        {{-- RIGHT - SOCIAL SHARE --}}
                        <div class="flex items-center lg:space-x-3 space-x-1 text-gray-600">

                            <button type="button"
                                onclick="window.open('https://www.facebook.com/sharer.php?u={{ url()->current() }}','_blank')"
                                class="text-white bg-[#3b5998] px-2 py-1 rounded-lg text-sm">
                                <i class="fa-brands fa-facebook-f me-1"></i> Share
                            </button>

                            <button type="button"
                                onclick="window.open('https://twitter.com/intent/tweet?url={{ url()->current() }}&text={{ $ArrViewPhotos->title }}','_blank')"
                                class="text-white bg-[#424242] px-2 py-1 rounded-lg text-sm">
                                <i class="fa-brands fa-x-twitter me-1"></i> Share
                            </button>

                            <button type="button"
                                onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&url={{ url()->current() }}','_blank')"
                                class="text-white bg-[#0a66c2] px-2 py-1 rounded-lg text-sm">
                                <i class="fa-brands fa-linkedin-in me-1"></i> Share
                            </button>

                            <button type="button"
                                onclick="window.open('https://api.whatsapp.com/send?text={{ $ArrViewPhotos->title }}%0A{{ url()->current() }}','_blank')"
                                class="text-white bg-green-600 px-2 py-1 rounded-lg text-sm">
                                <i class="fa-brands fa-whatsapp me-1"></i> Share
                            </button>

                            <button type="button"
                                onclick="window.location.href='mailto:?subject={{ $ArrViewPhotos->title }}&body=Check%20this:%20{{ url()->current() }}'"
                                class="text-white bg-gray-600 px-2 py-1 rounded-lg text-sm">
                                <i class="fa-regular fa-envelope me-1"></i> Share
                            </button>

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

                <hr>

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


                {{-- LATEST GALLERY LOOP --}}
                @foreach ($ArrlistingPhotos as $Photos)
                    @php
                        $listingDate = \Carbon\Carbon::parse($Photos->created_at);
                    @endphp

                    <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="{{ $Photos->title }}"
                                    class="w-full h-48 object-cover rounded-t-xl lg:rounded-l-xl transition-transform duration-300 hover:scale-105">

                                <span class="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> e4m Staff
                                        <i class="fa-regular fa-clock"></i>
                                        {{ $listingDate->diffInWeeks() > 1 ? $listingDate->format('M d, Y h:i A') : $listingDate->diffForHumans() }}
                                    </p>

                                    <a href="{{ url('photo/' . Str::slug($Photos->title) . '-' . $Photos->id . '.html') }}"
                                        class="text-white text-base bg-black hover:bg-red-600 rounded-full uppercase px-4 py-2 inline-block mt-2">
                                        <i class="fa-regular fa-image"></i> View Gallery
                                    </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('photo/' . Str::slug($Photos->title) . '-' . $Photos->id . '.html') }}"
                                        target="_blank" class="text-gray-500 hover:text-blue-600">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>

                                    <a href="https://twitter.com/intent/tweet?url={{ url('photo/' . Str::slug($Photos->title) . '-' . $Photos->id . '.html') }}"
                                        target="_blank" class="text-gray-500 hover:text-black">
                                        <i class="fab fa-x-twitter"></i>
                                    </a>

                                    <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ url('photo/' . Str::slug($Photos->title) . '-' . $Photos->id . '.html') }}"
                                        target="_blank" class="text-gray-500 hover:text-blue-700">
                                        <i class="fab fa-linkedin-in"></i>
                                    </a>

                                    <a href="https://api.whatsapp.com/send?text={{ $Photos->title }}%0A{{ url('photo/' . Str::slug($Photos->title) . '-' . $Photos->id . '.html') }}"
                                        target="_blank" class="text-gray-500 hover:text-green-500">
                                        <i class="fab fa-whatsapp"></i>
                                    </a>

                                    <a href="mailto:?subject={{ $Photos->title }}&body={{ url('photo/' . Str::slug($Photos->title) . '-' . $Photos->id . '.html') }}"
                                        class="text-gray-500 hover:text-blue-800">
                                        <i class="fa-solid fa-envelope"></i>
                                    </a>
                                </div>

                            </div>
                        </div>
                    </article>

                    <hr>
                @endforeach

            </div>

            {{-- RIGHT SIDEBAR --}}
            @include('article.rightsidebar')

        </div>
    </section>

    <script>
        $(document).ready(function() {
            $('.carousel').on('touchstart', function(event) {
                const xClick = event.originalEvent.touches[0].pageX;
                $(this).one('touchmove', function(event) {
                    const xMove = event.originalEvent.touches[0].pageX;
                    const sensitivityInPx = 5;
                    if (Math.floor(xClick - xMove) > sensitivityInPx) {
                        $(this).carousel('next');
                    } else if (Math.floor(xClick - xMove) < -sensitivityInPx) {
                        $(this).carousel('prev');
                    }
                });
                $(this).on('touchend', function() {
                    $(this).off('touchmove');
                });
            });

        });
    </script>


    <script type="application/ld+json">
        {
        "@@context": "https://schema.org",
        "@@type": "NewsArticle",
        "headline": "{{$ArrViewPhotos->title}}",
        "image": "{{ Config::get('constants.Sitethumbnail') }}{{ Config::get('constants.ALBUM_IMAGE_DIR') }}{{ $photo->photopath }}",  
        "author": {
            "@@type": "Person",
            "name": "e4m Staff"
        },
        "publisher": {
            "@@type": "Organization",
            "name": "Exchange4media",
            "logo": {
            "@@type": "ImageObject",
            "url": "https://exchange4media.gumlet.io/news-photo/static-images/logo-new.png"  
            }
        },
        "datePublished": "{{ date(DATE_ATOM, strtotime($ArrViewPhotos->created_at)) }}",
        "dateModified": "{{ date(DATE_ATOM, strtotime($ArrViewPhotos->updated_at)) }}",
        "url": "{{ Request::url() }}",
        "description": "{{ $ArrViewPhotos->description }}"
        }
</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('') }}/photos.html",
                        "name": "Photo-gallery"
                    }
                    },{
                    "@@type": "ListItem",
                    "position": "3",
                    "item": {
                        "@@id": "{{ url('') }}/photo/{{ Str::slug($ArrViewPhotos->title) }}-{{ $ArrViewPhotos->id }}.html",
                        "name": "{{ $ArrViewPhotos->title }}"
                    }
                }]
            }
            </script>
@endsection