@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">{{ ucfirst(trans($display_name)) }}</li>
                </ol>
            </nav>
            <!-- Category Title -->
            <h1 class="text-3xl font-bold mt-1 text-gray-900"><span class="rounded text-black">{{ $display_name }} </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 ">
                            <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 border hover:shadow-lg transition overflow-hidden rounded-xl">
                                <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="md:h-auto w-full h-64 lg:h-auto object-cover rounded-t-xl lg:rounded-l-xl lg:rounded-tr-none transition-transform duration-300 hover:scale-105"
                                        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 = \App\Models\Author::find($authorId);

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

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

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

                                                        $authorsHtml .= "<a href='{$url}'>{$nameHtml}</a>";
                                                    } else {
                                                        if ($index > 0) {
                                                            $authorsHtml .= ' & ';
                                                        }
                                                        $authorsHtml .=
                                                            "<a href='" .
                                                            url('author/exchange4media-staff-49.html') .
                                                            "'>Exchange4media Staff</a>";
                                                    }
                                                }
                                            } elseif (!empty($authorNameField)) {
                                                $slug = \Illuminate\Support\Str::slug($authorNameField);
                                                $id = $ArrlistingArticlespini->author_id ?? '';
                                                $url = url("author/{$slug}-{$id}.html");

                                                $nameHtml =
                                                    $authorNameField === 'NATIVE CONTENT'
                                                        ? "<strong style='color:red;'>{$authorNameField}</strong>"
                                                        : "<strong>{$authorNameField}</strong>";

                                                $authorsHtml = "<a href='{$url}'>{$nameHtml}</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>
@endsection