@extends('layouts.app')
@section('content')
    {!! $desktopSectionBannerHeader[0]->header_code !!}

    @if (isset($parents[7]))
        <!--Section Page Left Side Gate(DeskTop) starts from here-->
        <div class="hidden lg:block fixed top-20" style="right: calc((100% - 1290px)/2 - 120px);">
            @if ($parents[7]->status == 1)
                {!! $parents[7]->bscript !!}
            @else
            @endif
        </div>
        <!--Section Page Left Side Gate(DeskTop) end here-->
    @endif

    @if (isset($parents[6]))
        <!--Section Page Right Side Gate(DeskTop) starts from here-->
        <div class="hidden lg:block fixed top-20" style="left: calc((100% - 1290px)/2 - 120px);">
            @if ($parents[6]->status == 1)
                {!! $parents[6]->bscript !!}
            @else
            @endif
        </div>
        <!--Section Page Right Side Gate(DeskTop) end-->
    @endif

    @if (isset($parents[4]))
        @if ($parents[4]->status == 1)
            {!! $parents[4]->bscript !!}
        @else
        @endif
    @endif

    <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">{{ $ArrlistingArticles[0]->bredcrum }}</li>
                </ol>
            </nav>

            <!-- Category Title -->
            <h1 class="text-3xl font-bold mt-1 text-gray-900"><span
                    class="rounded text-black">{{ $ArrlistingArticles[0]->label }} </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 -->
                @if (isset($ArrlistingArticles) && !empty($ArrlistingArticles))
                    @foreach ($ArrlistingArticles as $key => $ArrlistingArticlespini)
                        <article class="bg-white flex flex-col lg:flex-col border p-2 rounded-xl hover:shadow-lg">
                            <a href="{{ $ArrlistingArticlespini->url }}">
                                <h2 class="text-2xl font-bold text-gray-800 hover:text-red-600 mb-2">
                                    {{ $ArrlistingArticlespini->title }}
                                </h2>
                            </a>
                            <div class="flex flex-col lg:flex-row transition overflow-hidden rounded-lg">
                                <a href="{{ $ArrlistingArticlespini->url }}" class="flex-shrink-0 w-full lg:w-1/3">
                                    <img src="{{ Config::get('constants.Sitethumbnail') }}{{ $ArrlistingArticlespini->photopath }}"
                                        alt="Article Image"
                                        class="w-full h-64 lg:h-auto object-cover rounded-xl lg:rounded-xl transition-transform duration-300 hover:scale-105 md:h-auto gm-observing gm-observing-cb"
                                        onerror="this.onerror=null;this.src='{{ Config::get('constants.SiteCmsurl') }}default-story.jpg';">
                                </a>
                                <div class="px-3 py-1 flex flex-col justify-between flex-1">
                                    <div class="text-[1.1rem]">

                                        <p>{{ $ArrlistingArticlespini->summary }}</p>

                                        @php
                                            $authorsHtml = '';
                                            $authorIdField = $ArrlistingArticlespini->author_id ?? null;
                                            $authorNameField = $ArrlistingArticlespini->authorname ?? null;

                                            if (!empty($authorIdField)) {
                                                $authorIds = explode(',', $authorIdField);

                                                foreach ($authorIds as $index => $authorId) {
                                                    $authorId = trim($authorId);

                                                    $author = $authorsMap[$authorId] ?? null;

                                                    if ($index > 0) {
                                                        $authorsHtml .= ' & ';
                                                    }

                                                    if ($author && !empty($author['name'])) {
                                                        $slug = \Illuminate\Support\Str::slug($author['name']);
                                                        $url = url("author/{$slug}-{$authorId}.html");

                                                        $nameHtml =
                                                            $author['name'] === 'NATIVE CONTENT'
                                                                ? "<strong style='color:red;'>{$author['name']}</strong>"
                                                                : "<strong>{$author['name']}</strong>";

                                                        $authorsHtml .= "<a href='{$url}'>{$nameHtml}</a>";
                                                    } else {
                                                        $authorsHtml .=
                                                            "<a href='" .
                                                            url('author/e4m-staff-2011.html') .
                                                            "'>e4m Staff</a>";
                                                    }
                                                }
                                            }
                                        @endphp


                                        <p class="text-xs text-gray-500 my-2"><i class="fa-solid fa-user"></i>
                                            {!! $authorsHtml !!} <i class="fa-regular fa-clock"></i>
                                            <a
                                                href="{{ url('') }}/articles/{{ $ArrlistingArticlespini->publish_date }}.html">
                                                @if (Carbon\Carbon::parse(
                                                        $ArrlistingArticlespini->publish_date && $ArrlistingArticlespini->publish_date
                                                            ? $ArrlistingArticlespini->publish_date . ' ' . $ArrlistingArticlespini->publish_time
                                                            : '---')->diffInDays() > 1)
                                                    {{ Carbon\Carbon::parse($ArrlistingArticlespini->publish_date . ' ' . $ArrlistingArticlespini->publish_time)->format('M j, Y g:i A') }}
                                                @else
                                                    {{ Carbon\Carbon::parse($ArrlistingArticlespini->publish_date && $ArrlistingArticlespini->publish_date ? $ArrlistingArticlespini->publish_date . ' ' . $ArrlistingArticlespini->publish_time : '---')->diffForHumans() }}
                                                @endif
                                            </a>
                                        </p>
                                    </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={{ $ArrlistingArticlespini->url }}&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={{ $ArrlistingArticlespini->url }}
                                                            &text={{ $ArrlistingArticlespini->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={{ $ArrlistingArticlespini->url }}
                                                                                                               &title={{ $ArrlistingArticlespini->title }}
                                                                                                               &summary={{ $ArrlistingArticlespini->summary }}
                                                                                                               &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={{ $ArrlistingArticlespini->title }}%0A{{ $ArrlistingArticlespini->url }}&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={{ $ArrlistingArticlespini->title }} - exchange4media&body=Hi,%0A
                                                                                                                I thought you'd like this:%0A%0A
                                                                                                                {{ $ArrlistingArticlespini->url }}&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>
                    @endforeach
                @endif
                <hr>


            </div>

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

        </div>
    </section>
    <script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "Organization",
  "@@id": "https://www.exchange4media.com/#organization",
  "name": "Exchange4Media",
  "url": "https://www.exchange4media.com",
  "logo": {
    "@@type": "ImageObject",
    "url": "https://exchange4media.gumlet.io/news-photo/static-images/logo-new.png"
  },
  "sameAs": [
    "https://www.facebook.com/exchange4media",
    "https://twitter.com/e4mtweets",
    "https://www.linkedin.com/company/exchange4media"
  ]
}
</script>
    <script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "CollectionPage",
  "name": "{{$ArrlistingArticles[0]->category_name}} News",
  "description": "Latest updates, appointments, and leadership movements across the industry.",
  "url": "{{ url()->current() }}",
  "inLanguage": "en-IN",
  "publisher": {
    "@@id": "https://www.exchange4media.com/#organization"
  },
  "mainEntity": {
    "@@id": "{{ url()->current() }}#itemlist"
  }
}
</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": "{{$ArrlistingArticles[0]->category_name}}"
      }
    }
  ]
}
</script>

    <script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "WebPage",
  "name": "{{$ArrlistingArticles[0]->category_name}} News",
  "description": "Exchange4media provides latest and breaking news on advertising, media, marketing, digital, PR industry people movement.",
  "url": "{{ Request::url() }}",
  "datePublished": "{{ $ArrlistingArticles[0]->publish_date ?? now() }}",
  "dateModified": "{{ now() }}",
  "inLanguage": "en-IN",
  "about": {
    "@@type": "Thing",
    "name": "{{$ArrlistingArticles[0]->category_name}}"
  },
  "publisher": {
    "@@id": "https://www.exchange4media.com/#organization"
  }
}
</script>
    <script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "ItemList",
  "@@id": "{{ url()->current() }}#itemlist",
  "name": "{{$ArrlistingArticles[0]->category_name}} Articles",
  "itemListElement": [
    @foreach($ArrlistingArticles->take(20) as $index => $article)
    {
      "@@type": "ListItem",
      "position": {{ $index + 1 }},
      "url": "{{ url($article->url) }}",
      "item": {
        "@@type": "NewsArticle",
        "headline": "{{ $article->title }}",
        "url": "{{ url($article->url) }}",
        "image": "{{ $article->image_url ?? 'https://exchange4media.com/default-image.jpg' }}",
        "datePublished": "{{ $article->publish_date }}",
        "dateModified": "{{ $article->updated_at ?? $article->publish_date }}"
      }
    }@if(!$loop->last),@endif
    @endforeach
  ]
}
</script>
@endsection