@extends('layouts.app')
@section('content')
    {!! $bannerHeader[0]->header_code !!}
    @if (isset($parents[6]))
        <!--Story Page Left 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>
        <!--Story Page Left Side Gate(DeskTop) end-->
    @endif

    @if (isset($parents[7]))
        <!--Story Page Right 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>
        <!--Story Page Right Side Gate(DeskTop) end here-->
    @endif

    @if (isset($parents[4]))
        <!--Story Page Full Horizontal Banner1(1)(DeskTop)-->
        <section class="max-w-7xl mx-auto px-1 py-1 hidden md:block lg:block">
            @if ($parents[4]->status == 1)
                {!! $parents[4]->bscript !!}
            @else
            @endif
        </section>
        <!--Story Page Full Horizontal Banner1(1)(DeskTop) end-->
    @endif

    @if (isset($parents[5]))
        <!--Story Page SiteCapture Banner(DeskTop) start-->
        @if ($parents[5]->status == 1)
            @if ($parents[5]->desktop == 1)
                {!! $parents[5]->bscript !!}
            @endif
        @else
        @endif
        <!--Story Page SiteCapture Banner(DeskTop) end-->
    @endif


    @if (isset($parents[1]))
        <!--Story Page BottomBand Banner(DeskTop) start-->
        @if ($parents[1]->status == 1)
            @if ($parents[1]->desktop == 1)
                {!! $parents[1]->bscript !!}
            @endif
        @else
        @endif
        <!--Story Page BottomBand Banner(DeskTop) end-->
    @endif


    @if (isset($parents[2]))
        <!--Story Page Site Capture Banner(mobile) start-->
        @if ($parents[2]->status == 1)
            @if ($parents[2]->mobile == 1)
                {!! $parents[2]->bscript !!}
            @endif
        @else
        @endif
        <!--Story Page Site Capture Banner(mobile) end-->
    @endif


    @if (isset($parents[3]))
        <!--Story Page Top Banner(mobile) start-->
        @if ($parents[3]->status == 1)
            @if ($parents[3]->mobile == 1)
                {!! $parents[3]->bscript !!}
            @endif
        @else
        @endif
        <!--Story Page Top Banner(mobile) end-->
    @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="font-semibold hover:text-red-600">Home</a></li>
                    <li><span class="mx-2">/</span></li>
                    <li class="text-red-600 font-semibold"><a
                            href="{{ url('/') . '/' . Str::slug($article->category_name) . '-news.html' }}"
                            class="hover:text-red-600">
                            {{ $article->category_name }} News</a></li>
                    <li><span class="mx-2">/</span></li>
                    <li class="font-semibold"> {{ $article->title }}</li>
                </ol>
            </nav>
        </div>
    </section>

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

            <div class="lg:w-2/3 flex flex-col gap-6">
                <!-- LEFT: ARTICLE -->
                <article class="lg:col-span-2 bg-white rounded-xl shadow-sm lg:p-6 sm:p-0">

                    <!-- Story Title -->
                    <h1 class="lg:text-4xl text-3xl font-bold leading-tight mb-4">
                        {{ $article->title }}
                    </h1>
                    <p class="font-bold italic"> {{ $article->summary }}</p>
                    <!-- 3-Box Info Row -->
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center border-y py-2 mb-0 text-sm">
                        @php
                            $defaultImage = Config::get('constants.Sitethumbnail') . 'album/defaultnew.png';
                        @endphp

                        <!-- Box 1: Author -->
                        <div class="flex items-center gap-3">
                            <img src="{{ Config::get('constants.Sitethumbnail') }}album/{{ $article->photo }}"
                                alt="Author" class="w-12 h-12 rounded-full object-cover"
                                onerror="this.onerror=null;this.src=&quot;{{ Config::get('constants.Sitethumbnail') }}album/defaultnew.png&quot;;">

                            <div>
                                <p class="font-semibold text-gray-800">
                                    @if ($article->authorname == 'NATIVE CONTENT')
                                        <span class="l16">
                                        @else
                                            <span class="l16">by
                                    @endif

                                    @if (strpos($article->author_id, ',') !== false)
                                        <span class="author-name">
                                            @if (!empty($article->authorname))
                                                @foreach (explode(',', $article->author_id) as $k => $au)
                                                    @if (!empty($au))
                                                        @php
                                                            $re = \App\Models\Author::find($au);
                                                        @endphp
                                                        @if (!empty($re?->name))
                                                            <a
                                                                href="{{ url('author/' . str($re->name)->slug() . '-' . $re->id . '.html') }}">
                                                                <strong
                                                                    class="{{ $article->authorname == 'NATIVE CONTENT' ? 'text-red-600' : '' }}">
                                                                    @if ($k == 1)
                                                                        &
                                                                    @endif
                                                                    {{ $re->name }}
                                                                </strong>
                                                            </a>
                                                        @endif
                                                    @else
                                                        <a href="{{ url('author/exchange4media-staff-49.html') }}">Exchange4media
                                                            Staff</a>
                                                    @endif
                                                @endforeach
                                            @endif
                                        </span>
                                    @else
                                        <span class="author-name">
                                            @if (!empty($article->authorname))
                                                <a
                                                    href="{{ url('author/' . str($article->authorname)->slug() . '-' . $article->author_id . '.html') }}">
                                                    <strong
                                                        class="{{ $article->authorname == 'NATIVE CONTENT' ? 'text-red-600' : '' }}">
                                                        {{ $article->authorname }}
                                                    </strong>
                                                </a>
                                            @endif
                                        </span>
                                    @endif
                                </p>

                                <p class="text-gray-500 text-xs">
                                    <span class="update">
                                        <strong class="cllb">Published:</strong>
                                        <a href="{{ url('') }}/articles/{{ $article->publish_date }}.html">
                                            {{ \Carbon\Carbon::parse($article->publish_date . ' ' . $article->publish_time)->format('M j, Y g:i A') }}
                                            &nbsp; </a>
                                    </span>
                                    <br>
                                    <span class="uppercase pl-1"
                                        style="color: #e00 !important; font-family: 'Fira Sans', sans-serif !important;">
                                        @php
                                            // Estimate reading time
                                            $wordCount = str_word_count(strip_tags($article->description));
                                            $minutes = floor($wordCount / 200);
                                            $seconds = floor(($wordCount % 200) / (200 / 60));

                                            if ($minutes == 0) {
                                                $readTime = '1 min read';
                                            } elseif ($seconds >= 10) {
                                                $readTime = $minutes + 1 . ' min read';
                                            } else {
                                                $readTime = $minutes . ' min read';
                                            }
                                        @endphp
                                        {{ $readTime }}
                                    </span>

                                    @if ($article->authorname == 'NATIVE CONTENT')
                                        | <span class="pl-1 uppercase text-red-600"
                                            style="font-family: 'Fira Sans', sans-serif !important;">
                                            Advertorial
                                        </span>
                                    @endif
                                </p>

                            </div>
                        </div>

                        <!-- Box 2: Social Icons -->
                        <div class="flex justify-center gap-4 text-lg">
                            <a href="https://news.google.com/publications/CAAqLggKIihDQklTR0FnTWFoUUtFbVY0WTJoaGJtZGxORzFsWkdsaExtTnZiU2dBUAE?hl=en-IN&gl=IN&ceid=IN:en"
                                class="bg-gray-100 hover:bg-red-600 hover:text-white border border-red-600 text-black font-bold py-1 px-4 rounded-full">
                                <img src="https://storage.googleapis.com/massmailer/e4mtest-icons/google-news-icon.png"
                                    class="inline-block w-[25px]"> Follow Us
                            </a>
                        </div>

                        <!-- Box 3: Font Controls -->
                        <div class="flex justify-end sm:justify-end gap-2">
                            <button id="decreaseFont" class="px-3 py-1 border rounded hover:bg-gray-100"
                                title="Decrease Font Size">A-</button>
                            <button id="increaseFont" class="px-3 py-1 border rounded hover:bg-gray-100"
                                title="Increase Font Size">A+</button>
                        </div>
                    </div>




                    <div class="relative mb-3">
                        <!-- Article Image / Video -->
                        @if (!empty($article->video))
                            <iframe loading="lazy" width="100%" height="315" src="{!! $article->video !!}"
                                frameborder="0"
                                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen class="rounded-sm w-full">
                            </iframe>
                        @else
                            <img src="{{ Config::get('constants.Sitethumbnail') }}{{ $article->photopath }}?blur=15"
                                data-src="{{ Config::get('constants.Sitethumbnail') }}{{ $article->photopath }}"
                                data-gmlazy="false" data-gmimg="false" alt="{{ $article->phototitle }}"
                                title="{{ $article->phototitle }}" class="rounded-sm w-full img-responsive fitimg"
                                onerror="this.onerror=null;this.src='{{ Config::get('constants.SiteCmsurl') }}default-story.jpg';">
                        @endif



                        <!-- Social Icons Overlay -->
                        <div class="absolute bottom-4 right-4 flex gap-4 bg-black/50 p-2 rounded">
                            <i class="fa-solid fa-share text-white"></i>

                            <a href="https://www.facebook.com/sharer.php?u={{ $article->url }}&utm_source=desktop&utm_medium=facebook&utm_campaign=facebook&utm_term=facebook&utm_content=facebook"
                                class="text-white 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={{ $article->url }}&text={{ $article->title }}&via=e4mtweets&utm_source=desktop&utm_medium=twitter&utm_campaign=twitter&utm_term=twitter&utm_content=twitter"
                                class="text-white 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={{ $article->url }}
                                        &title={{ $article->title }}
                                        &summary={{ $article->title }}
                                        &source=exchange4media.com&utm_source=desktop&utm_medium=linkedin&utm_campaign=linkedin&utm_term=linkedin&utm_content=linkedin"
                                class="text-white 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={{ $article->url }}&utm_source=desktop&utm_medium=whatsapp&utm_campaign=whatsapp&utm_term=whatsapp&utm_content=whatsapp"
                                class="text-white hover:text-green-500" aria-label="Share on WhatsApp">
                                <i class="fab fa-whatsapp"></i>
                            </a>


                            <a href="mailto:?subject={{ $article->title }}- exchange4media&body=Hi,%0A
                                        I thought you'd like this:%0A%0A
                                        {{ $article->url }}&utm_source=desktop&utm_medium=email&utm_campaign=email&utm_term=email&utm_content=email"
                                class="text-white hover:text-blue-800" aria-label="Share via Email">
                                <i class="fa-solid fa-envelope"></i>
                            </a>


                        </div>
                    </div>

                    <div id="audiofiledisplay" class="w-full"></div>

                    <!-- Article Description start-->
                    <div id="articleContent" class="prose max-w-none text-[1.1rem] leading-relaxed">
                        <p class="mb-2"> {!! $content !!}</p>
                    </div>
                    <!-- Article Description end-->


                    @if ($article->related_articles !== null)
                        <aside class="bg-white p-4 rounded-xl shadow-sm">
                            <h2 class="text-2xl font-bold border-b-4 border-red-600 mb-0 uppercase"><span
                                    class="py-1 text-white px-3 bg-red-600 rounded-t-lg">RELATED ARTICLES</span></h2>

                            <div class="space-y-4 p-3 border">
                                <!-- Article Item 1 -->
                                @php
                                    $articlesrelatecat = json_decode($article->related_articles);
                                @endphp
                                @foreach ($articlesrelatecat as $articlesrelateinsidearticle)
                                    <article class="flex items-start border-b pb-3">
                                        <div class="ml-3">
                                            <a href="{{ $articlesrelateinsidearticle->url }}"
                                                class="text-lg/6 font-semibold hover:text-red-600">
                                                {{ $articlesrelateinsidearticle->title }}
                                            </a>
                                        </div>
                                    </article>
                                @endforeach

                            </div>
                        </aside>
                    @endif



                    {{-- story disclaimer --}}
                    @if (isset($article) && !empty($article))
                        {!! $article->story_disclaimer !!}
                    @endif



                    <!-- Tags -->
                    @if (isset($ArrTageListing) && !empty($ArrTageListing))
                        <div class="mt-6 border-t pt-3 flex flex-wrap gap-2 text-sm">
                            <span class="font-semibold">Tags:</span>
                            @foreach (explode(',', $ArrTageListing) as $tag)
                                <a href="{{ url('') }}/tags/{{ Str::slug($tag) }}.html"
                                    class="bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded">{{ $tag }}</a>
                            @endforeach
                        </div>
                    @endif
                </article>

            </div>

            @include('article.rightsidebar')

        </div>
    </section>