@push('metadata')
@php
$mTitle = @$newsDetail['seo_title'] ?? $newsDetail['title'];
$mDescrRaw = @$newsDetail['meta_description'] ?? $newsDetail['title'];
// Remove HTML & trim to 155 chars
$mDescr = mb_substr(strip_tags($mDescrRaw), 0, 155);
$faqs = $newsDetail['faq'] ?? '[]';
$mKWords = $newsDetail['meta_keywords'];
$mUrl = url()->current();
$mImage = config('constants.crypto-press-release');
$title = $newsDetail['is_gabbar'] == 1 ? 'Crypto News' : 'Press Release';
$url = $newsDetail['is_gabbar'] == 1 ? 'crypto-news' : 'crypto-press-release';
@endphp
<title>{{ @$mTitle }}</title>
<meta name="keywords" content="{{ @$mKWords }}" />
<meta name="description" content="{{ @$mDescr }}" />
<meta property=og:locale content="{{ app()->getLocale() }}" />
<meta property=og:type content="{{config('constants.organisation_type_news')}}" />
<meta property="og:site_name" content="Crypto Display" />
<meta property="og:title" content="{{ @$mTitle }}" />
<meta property="og:description" content="{{ @$mDescr }}" />
<meta property="og:url" content="{{ @$mUrl }}" />
<meta property="og:image" content="{{ @$mImage }}" />
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="628">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{{ @$mTitle }}" />
<meta name="twitter:description" content="{{ @$mDescr }}" />
<meta name="twitter:url" content="{{ @$mUrl }}" />
<meta name="twitter:image" content="{{ @$mImage }}" />
<meta name="twitter:site" content="{{config('constants.twitter_url')}}" />
<meta name="twitter:creator" content="{{config('constants.twitter_url')}}" />
<link rel="alternate" type="application/rss+xml" title="Crypto Display RSS Feed"
    href="{{ RssFeedHelper::getRssFeedUrl('crypto-news') }}" />
<link rel="alternate" type="application/rss+xml" title="Crypto Display RSS Feed"
    href="{{ RssFeedHelper::getRssFeedUrl('crypto-press-release') }}" />
@endpush

@push('head_scripts')
{!! SchemaHelper::webpageSchema($mTitle ?? null, $mDescr ?? null) !!}
{!! SchemaHelper::getBreadcrumbSchema([
    ['name' => 'Home', 'url' => url('/')],
    ['name' => Illuminate\Support\Str::limit($newsDetail['title'], 50), 'url' =>$mUrl],
]) !!}
{!! SchemaHelper::getImageObjectSchema(CommonHelper::s3ImageOrDefault($mImage), $mTitle, 1200, 630) !!}
@endpush

<div>
    <!-- brdcrmb -->
    <section class="web-color p-2 breadcrumb">
        <div class="container">
            <div class="row">
                <div class="d-flex gap-2 p-0 m-0 list-unstyled justify-content-center text-white">
                    <ul class="d-flex p-0 m-0 list-unstyled">
                        <li class="position-relative"><a href="{{ CommonHelper::makeUrl('/') }}" title="Home - Crypto Display"
                                class="text-white text-decoration-none">Home</a></li>
                        <li class="position-relative one-line-text">{{ Illuminate\Support\Str::limit($newsDetail['title'], 50) }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="my-3">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="border p-3 shadow-sm bg-white rounded-3">
                        <div class="mainheadingdetails mb-3">
                            <div class="bg-detailheading">
                                <h1 class="text-dark fw-bold mb-2 p-0 text-black h2"> {{ $newsDetail['title']}} </h1>
                                <div class="d-flex justify-content-between flex-wrap align-items-center">
                                    <div class="post-meta d-flex gap-3 align-items-center">
                                        <img src="{{ $newsDetail['post_author']['image'] }}" loading="lazy"
                                            alt="{{ $newsDetail['post_author']['dispaly_name'] ?? 'Author' }}"
                                            class="avatar rounded-circle" height="48" width="48"
                                            onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                        <div>
                                            <a href="{{ URL::to('crypto-author/' . @$newsDetail['post_author']['slug']) }}"
                                                class="text-decoration-none text-dark fw-semibold"
                                                title="{{ @$newsDetail['post_author'] != null ? @$newsDetail['post_author']['dispaly_name'] : $newsDetail['author_name'] }}">
                                                {{ @$newsDetail['post_author'] != null ? @$newsDetail['post_author']['dispaly_name'] : $newsDetail['author_name'] }}
                                            </a>
                                            <div class="fs-13 text-secondary">
                                                <i class="fa-regular fa-calendar"></i>
                                                <span class="post-date ps-1">{{ \Carbon\Carbon::parse($newsDetail['publishedAt'])->format('Y-m-d') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sharedetails d-flex gap-1">
                                        <span class="me-2">Share:</span>
                                        <!-- Facebook -->
                                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
                                            target="_blank" title="Facebook" rel="noreferrer nofollow noopener">
                                            <i class="fa-brands fa-facebook-f me-2 web-textcolor"></i>
                                            <span class="d-none">Facebook</span>
                                        </a>
                                        <!-- Twitter / X -->
                                        <a href="https://x.com/intent/post?url={{ url()->current() }}" target="_blank" title="Twitter"
                                            rel="noreferrer nofollow noopener">
                                            <i class="fa-brands fa-x-twitter me-2 web-textcolor"></i>
                                            <span class="d-none">Twitter</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="newsdetailsleft newsdetailsimage">
                            <!-- 🔹 Featured Image -->
                            <div class="news-card-image mb-2">
                                <img width="768" height="426"
                                    src="{{ CommonHelper::s3ImageOrDefault($newsDetail['image']) }}"
                                    class="w-100 h-auto rounded-2 wp-post-image" loading="eager" alt="{{ $newsDetail['title']}}"
                                    decoding="async" fetchpriority="high"
                                    onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                            </div>
                        </div>
                        <!-- 🔹 Title + Author + Date -->
                        <div class="newsdetailsleft mainheadingdetails my-4">
                            <div class="bg-detailheading border-bottom pb-2">
                                @if($newsDetail['is_gabbar'] == 1)
                                {!! CommonHelper::addNoFollowToExternalLinks($newsDetail['description'])!!}
                                @else
                                {!! CommonHelper::addNoFollowToExternalLinksPress($newsDetail['description'])!!}
                                @endif
                            </div>
                        </div>

                        <div class="border-bottom pb-3">
                            <div class="border-web rounded-4 p-4 shadow-sm">
                                <div class="d-flex align-items-start gap-3 align-items-center">
                                    <div class="author-avatar rounded-circle d-flex align-items-center justify-content-center text-white fw-bold">
                                        <img src="{{ $newsDetail['post_author']['image'] }}" loading="lazy"
                                            alt="{{ $newsDetail['post_author']['dispaly_name'] ?? 'Author' }}"
                                            class="avatar avatar-120 rounded-circle"
                                            height="64" width="64"
                                            onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                    </div>
                                    <div>
                                        <div class="d-flex gap-3 align-items-center mb-1 flex-wrap">
                                            <a href="{{URL::to('crypto-author/' . $newsDetail['post_author']['slug'])}}"
                                                class="text-decoration-none text-black"
                                                title="{{ $newsDetail['post_author']['dispaly_name'] ?? 'Author' }}">
                                                <span class="h5 fw-bold">{{ $newsDetail['post_author']['dispaly_name'] ?? 'Author' }}</span>
                                            </a>
                                            <div class="d-flex gap-2">
                                                @if (!empty($newsDetail['post_author']['telegram_id']))
                                                    <a href="{{ CommonHelper::formatTelegramUrl($newsDetail['post_author']['telegram_id']) }}" class="text-decoration-none" title="Telegram">
                                                        <img src="{{ URL::asset('assets/images/authors/telegram.png') }}" width="22" height="22" alt="Telegram">
                                                        <span class="d-none">Telegram</span>
                                                    </a>
                                                @endif

                                                @if (!empty($newsDetail['post_author']['twitter_id']))
                                                    <a href="{{ CommonHelper::formatTwitterUrl($newsDetail['post_author']['twitter_id']) }}" class="text-decoration-none" title="Twitter">
                                                        <img src="{{ URL::asset('assets/images/authors/twitter.png') }}" width="22" height="22" alt="Twitter">
                                                        <span class="d-none">Twitter</span>
                                                    </a>
                                                @endif

                                               {{-- <a href="{{ $newsDetail['post_author'][''] }}" class="text-decoration-none" title="Linkedin">
                                                    <img src="{{ URL::asset('assets/images/authors/linkedin.png') }}" width="22" height="22" alt="Linkedin">
                                                    <span class="d-none">Linkedin</span>
                                                </a> --}}
                                            </div>
                                        </div>
                                        <span class="author-role fs-14 text-secondary">Blockchain News Writer at <a href="{{ URL::to('/')}}"
                                            title="Cryptodisplay" class="web-textcolor fw-bold">Cryptodisplay</a>
                                        </span>
                                    </div>
                                </div>
                                <div class="author-content">
                                    <span class="author-bio my-4 three-line-text fs-14">
                                        {!! $newsDetail['post_author']['about_us'] ?? 'No author description is
                                        available.' !!}
                                    </span>
                                    <div class="d-flex justify-content-end">
                                        <a class="read-more-link text-decoration-none fw-bold fs-14 d-inline-flex align-items-center"
                                            href="{{URL::to('crypto-author/' . $newsDetail['post_author']['slug'])}}">View All Articles By
                                            {{ $newsDetail['post_author']['dispaly_name'] ?? 'Author' }}
                                            <i class="fa-solid fa-arrow-right-long ms-1"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 🔹 Post Content -->
                        <div class="detailscontent">
                            <div class="d-flex justify-content-between my-3 border-bottom pb-4 flex-wrap gap-2">
                                @if(!empty($prev))
                                    <a href="{{ URL::to('/' . $prev->alias) }}" 
                                    class="btn btn-primary text-decoration-none"
                                    title="{{ $prev->title }}">
                                        <i class="fa-solid fa-left-long"></i> 
                                        <span>Previous Article</span>
                                    </a>
                                @endif

                                @if(!empty($next))
                                    <a href="{{ URL::to('/' . $next->alias) }}" 
                                    class="btn btn-primary text-decoration-none"
                                    title="{{ $next->title }}">
                                        <span>Next Article</span> 
                                        <i class="fa-solid fa-right-long"></i>
                                    </a>
                                @endif
                            </div>
                        </div>

                        <div class="border shadow p-3 mt-4">
                            <span class="h4 fw-bold d-block mb-3 border-bottom pb-3">Leave a comment</span>
                            @if (session()->has('success'))
                            <div class="alert alert-success text-center py-2 mb-3">
                                {{ session('success') }}
                            </div>
                            @endif
                            <div class="mb-3">
                                <label class="mb-2 fw-semibold" for="name">Name</label>
                                <input type="text" wire:model.defer="commentName" class="form-control" id="name"
                                    placeholder="Enter your name">
                                @error('commentName') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                            <div class="mb-3">
                                <label class="mb-2 fw-semibold" for="comment">Comment</label>
                                <textarea wire:model.defer="commentBody" class="form-control" id="comment"
                                    placeholder="Write your comment here..." rows="4"></textarea>
                                @error('commentBody') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                            <div class="d-flex justify-content-center mt-4">
                                @if(Auth::check())
                                <button wire:click="postComment" wire:loading.attr="disabled" wire:target="postComment"
                                    class="btn btn-primary py-1">
                                    <span wire:loading.remove wire:target="postComment">Post Comment</span>
                                    <span wire:loading wire:target="postComment">Posting...</span>
                                </button>
                                @else
                                <button data-bs-toggle="modal" data-bs-target="#loginPromptModal"
                                    class="btn btn-primary py-1">
                                    <span class="align-items-center text-nowrap">
                                        <span>Login to Comment</span>
                                    </span>
                                    <span wire:loading>
                                        <i class="fa fa-spinner fa-spin ms-1"></i>
                                    </span>
                                </button>
                                @endif
                            </div>
                        </div>
                        <div class="mt-2" id="view_reply">
                            @if(!empty($comments) && count($comments))
                            @foreach($comments as $comment)
                            <div class="rounded p-3 mb-3 bg-white shadow-sm bgreplyview">
                                <div class="row">
                                    <div class="col-xxl-9 col-xl-8">
                                        <p class="text-muted mb-2  w-fit">
                                            <i class="fa-regular fa-clock me-2 text-downriver"></i>
                                            {{ $comment->created_at?->diffForHumans() ?? '' }}
                                        </p>
                                        <p class="bg-webcolor py-1 px-2 fs-14 fw-bold rounded-3 mb-0">
                                            {{ $comment->body_html }}
                                        </p>
                                        {{-- 🔵 Reply button --}}
                                        <button class="btn mt-2 text-decoration-none"
                                            wire:click="showReplyBox({{ $comment->id }})" wire:loading.attr="disabled"
                                            wire:target="showReplyBox({{ $comment->id }})">
                                            <i class="fa fa-reply"></i>
                                            <span wire:loading.remove
                                                wire:target="showReplyBox({{ $comment->id }})">Reply</span>
                                            <span wire:loading
                                                wire:target="showReplyBox({{ $comment->id }})">Loading...</span>
                                        </button>
                                        {{-- 🟩 Reply input box --}}
                                        @if($replyParentId === $comment->id)
                                        <div class="mt-2 bg-webcolor py-1 px-2 fs-14 fw-bold rounded-3">
                                            <textarea wire:model.defer="replyBody" class="form-control mb-2" rows="2"
                                                placeholder="Write your reply..."></textarea>
                                            <div class="d-flex justify-content-end">
                                                <button class="btn btn-primary fs-13"
                                                    wire:click="postReply({{ $comment->id }})"
                                                    wire:loading.attr="disabled"
                                                    wire:target="postReply({{ $comment->id }})">
                                                    <span wire:loading.remove
                                                        wire:target="postReply({{ $comment->id }})">Post Reply</span>
                                                    <span wire:loading
                                                        wire:target="postReply({{ $comment->id }})">Posting...</span>
                                                </button>
                                            </div>
                                            @error('replyBody') <span class="text-danger small">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        @endif
                                        {{-- 🧵 Nested replies --}}
                                        @if($comment->children && $comment->children->count())
                                        <div class="ms-4 mt-3 border-start ps-3 bg-webcolor py-1 px-2 fs-14 fw-bold rounded-3">
                                            @foreach($comment->children as $reply)
                                            <div class="mb-2">
                                                <p class="text-dark mb-1">{{ $reply->body_html }}</p>
                                                <small class="text-muted">
                                                    <i class="fa-regular fa-clock me-1"></i>
                                                    {{ $reply->created_at->diffForHumans() }}
                                                    • <strong>{{ $reply->user->name ?? 'Guest User' }}</strong>
                                                </small>
                                            </div>
                                            @endforeach
                                        </div>
                                        @endif
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-3 col-md-5 col-sm-6 col-8 text-end mb-3">
                                        <div
                                            class="row align-items-center shaffron-shadow-sm rounded-4 overflow-hidden border mx-0 bg-darkview">
                                            <div class="col-4 px-0 text-center border-end">
                                                <img src="{{ $comment->user->avatar ?? asset('assets/images/default.png') }}" loading="lazy"
                                                    alt="{{ $comment->user->name ?? 'Guest User' }}" width="40"
                                                    height="40"
                                                    onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                            </div>
                                            <div class="col-8">
                                                <span class=" fw-semibold text-center one-line-text d-block fs-14">
                                                    {{ $comment->user->name ?? 'Guest User' }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="projectright position-sticky top-10">
                        <div class="boxnews">
                            <a href="{{ URL::to('/crypto-news') }}"
                                class="h4 fw-bold heading-bdr-left my-3 position-relative leftzero">
                                More News <i class="fa-solid fa-arrow-right-long"></i>
                            </a>
                            @php
                            $first = $latestNews->first();
                            $remaining = $latestNews->skip(1);
                            @endphp
                            @if($first)
                            <div class="card bg-transparent h-10 border-0 d-flex align-items-start justify-content-between border-hover p-0 mb-0 mt-2">
                                <a class="w-100" href="{{ URL::to('/' . $first->alias) }}" title="{{ $first->title }}"
                                    wire:ignore>
                                    <img width="300" loading="lazy" height="167" src="{{ $first->image }}"
                                        class="w-100 h-auto rounded-2 position-relative"
                                        alt="{{ $first->img_alt_title }}"
                                        onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                    <span class="d-none">{{ $first->title }}</span>
                                </a>
                                <div class="card-body py-2 px-1">
                                    <a href="{{ URL::to('/' . $first->alias) }}"
                                        class="two-line-text text-paragraph fw-semibold text-decoration-none"
                                        title="{{ $first->title }}">
                                        {{ $first->title }}
                                    </a>
                                </div>
                                <div class="card-footer bg-transparent border-top-0 d-flex justify-content-between align-items-center flex-wrap px-2 py-0 w-100">
                                    <div>
                                        <a href="{{URL::to('crypto-author/' . $first->postAuthor->slug)}}"
                                            class="text-paragraph fw-semibold text-decoration-none text-capitalize fs-12 border-end pe-1"
                                            title="{{ $first->postAuthor->name ?? ucfirst(str_replace('-', ' ', $first->author_name)) }}">
                                            {{ $first->postAuthor->dispaly_name ?? ucfirst(str_replace('-', ' ', $first->author_name)) }}
                                        </a>
                                        <span class="small ps-1">
                                            {{ $first['publishedAt'] ? date('F j, Y', $first['publishedAt']) : '' }}
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <x-like-card :id="$first['id'] ?? ''" :type="'news'"
                                            :likeCount="$first['likes_counts'] ?? 0" />
                                        <button
                                            class="text-dark text-decoration-none lh-normal share-btn border-0 bg-transparent"
                                            data-url="{{ URL($first['alias']) }}" data-bs-toggle="modal"
                                            data-bs-target="#shareModal" title="Share"
                                            wire:click="setShareUrl('{{ URL($first['alias']) }}')">
                                            <i class="fa-solid fa-share"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @endif

                            <div class="row mt-3">
                            @foreach($remaining as $item)
                            <div class="col-lg-12 col-md-4">
                            <div class="card bg-transparent p-0 h-10 border-0 d-flex align-items-start border-hover my-3">
                                <div class="row g-0">
                                    {{-- IMAGE --}}
                                    <div class="col-lg-4 position-relative">
                                        <a class="position-relative" href="{{ URL::to('/' . $item->alias) }}"
                                            title="{{ $item->title }}" wire:ignore>
                                            <img width="300" height="167" loading="lazy" src="{{ $item->image }}"
                                                class="w-100 h-auto rounded-2 position-relative"
                                                alt="{{ $item->img_alt_title }}"
                                                onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                            <span class="d-none">{{ $item->title }}</span>
                                        </a>
                                        {{-- LIKE + SHARE --}}
                                        <div
                                            class="position-absolute top-4 end-1 bg-white rounded-4 px-1 d-flex align-items-center fs-13 lh-1 likedetails">
                                            <div class="d-flex align-items-center">
                                                <x-like-card :id="$item['id'] ?? ''" :type="'news'"
                                                    :likeCount="$item['likes_counts'] ?? 0" />
                                                <button
                                                    class="text-dark text-decoration-none lh-normal share-btn border-0 bg-transparent"
                                                    data-url="{{ URL::to($item['alias']) }}" data-bs-toggle="modal"
                                                    data-bs-target="#shareModal" title="Share"
                                                    wire:click="setShareUrl('{{ URL::to($item['alias']) }}')">
                                                    <i class="fa-solid fa-share"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- TEXT SECTION --}}
                                    <div class="col-lg-8 card bg-transparent border-0">
                                        <div class="card-body py-0 px-1 mt-2 mt-lg-0">
                                            <a href="{{ URL::to('/' . $item->alias) }}"
                                                class="two-line-text text-paragraph fw-bold text-decoration-none"
                                                title="{{ $item->title }}">
                                                {{ $item->title }}
                                            </a>
                                        </div>
                                        {{-- AUTHOR + TIME --}}
                                        <div class="card-footer bg-transparent border-top-0 d-flex justify-content-between align-items-center flex-wrap px-1 py-0 w-100 mt-2">
                                            <div class="d-flex align-items-center gap-1">
                                                <a href="{{URL::to('crypto-author/' . $item->postAuthor->slug)}}"
                                                    class="text-paragraph fw-semibold text-decoration-none text-capitalize fs-12 border-end pe-1"
                                                    title="{{ $item->postAuthor->name ?? ucfirst(str_replace('-', ' ', $item->author_name)) }}">
                                                    {{ $item->postAuthor->dispaly_name ?? ucfirst(str_replace('-', ' ', $item->author_name)) }}
                                                </a>
                                                <span class="fs-12">
                                                    {{ $item['publishedAt'] ? date('F j, Y', $item['publishedAt']) : '' }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            @endforeach
                            </div>
                        </div>
                        <div class="boxnews">
                            <a href="{{ URL::to('/crypto-press-release') }}"
                                class="h4 fw-bold heading-bdr-left my-3 position-relative leftzero text-decoration-none d-inline-block">
                                Press Release <i class="fa-solid fa-arrow-right-long"></i>
                            </a>
                            @php
                            $first = $latestpress->first();
                            $remaining = $latestpress->skip(1);
                            @endphp
                            @if ($first)
                            <div
                                class="card h-10  border-0 border-bottom d-flex align-items-start justify-content-between border-hover p-0 mb-2 bottomdetaillike">
                                <a class="w-100" href="{{ URL::to('/' . $first['alias']) }}" title="{{ $first->title }}"
                                    wire:ignore>
                                    <img width="300" height="167" src="{{ $first->image }}"
                                        class="w-100 h-auto rounded-2 position-relative wp-post-image entered lazyloaded td-animation-stack-type0-2"
                                        alt="Crypto Market Update" decoding="async"
                                        onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                    <span class="d-none">{{ $first->title }}</span>
                                </a>
                                <div class="card-body py-2 px-1">
                                    <a href="{{ URL::to('/' . $first['alias']) }}"
                                        class="two-line-text text-paragraph fw-semibold text-decoration-none"
                                        title="{{ $first->title }}">
                                        {{ $first->title }} </a>
                                </div>
                                <div
                                    class="card-footer bg-transparent border-top-0 d-flex justify-content-between align-items-center flex-wrap px-2 py-0 w-100">
                                    <div>
                                        <a href="{{URL::to('crypto-author/' . $item->postAuthor->slug)}}"
                                                    class="text-paragraph fw-semibold text-decoration-none text-capitalize fs-12 border-end pe-1"
                                                    title="{{ $item->postAuthor->name ?? ucfirst(str_replace('-', ' ', $item->author_name)) }}">
                                                    {{ $item->postAuthor->dispaly_name ?? ucfirst(str_replace('-', ' ', $item->author_name)) }}
                                                </a>

                                        <span class="small ps-1">
                                            {{ $first['publishedAt'] ? date('F j, Y', $first['publishedAt']) : '' }}
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <x-like-card :id="$first['id'] ?? ''" :type="'news'"
                                            :likeCount="$first['likes_counts'] ?? 0" />
                                        <button
                                            class="text-dark text-decoration-none lh-normal share-btn border-0 bg-transparent"
                                            data-url="{{ URL($first['alias']) }}" data-bs-toggle="modal"
                                            data-bs-target="#shareModal" title="Share"
                                            wire:click="setShareUrl('{{ URL($first['alias']) }}')">
                                            <i class="fa-solid fa-share"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @endif
                            @foreach($remaining as $item)
                            <div
                                class="card h-10  border-0 border-bottom d-flex align-items-start justify-content-between border-hover px-0 py-2">
                                <div class="card-body py-2 px-2">
                                    <a href="{{ URL::to('/' . $item['alias']) }}"
                                        class="two-line-text text-paragraph fw-semibold text-decoration-none"
                                        title="{{ $item->title }}">
                                        {{ $item->title }} </a>
                                </div>
                                <div
                                    class="card-footer bg-transparent border-top-0 d-flex justify-content-between align-items-center flex-wrap px-2 py-0 w-100">
                                    <div>
                                        <a href="{{URL::to('crypto-author/' . $item->postAuthor->slug)}}"
                                                    class="text-paragraph fw-semibold text-decoration-none text-capitalize fs-12 border-end pe-1"
                                                    title="{{ $item->postAuthor->name ?? ucfirst(str_replace('-', ' ', $item->author_name)) }}">
                                                    {{ $item->postAuthor->dispaly_name ?? ucfirst(str_replace('-', ' ', $item->author_name)) }}
                                                </a>
                                        <span class="small ps-1">
                                            {{ $item['publishedAt'] ? date('F j, Y', $item['publishedAt']) : '' }}
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <x-like-card :id="$item['id'] ?? ''" :type="'news'"
                                            :likeCount="$item['likes_counts'] ?? 0" />
                                        <button
                                            class="text-dark text-decoration-none lh-normal share-btn border-0 bg-transparent"
                                            data-url="{{ URL($item['alias']) }}" data-bs-toggle="modal"
                                            data-bs-target="#shareModal" title="Share"
                                            wire:click="setShareUrl('{{ URL($item['alias']) }}')">
                                            <i class="fa-solid fa-share"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('livewire.common.share-modal')
    @php
    $faqs = $visibleFaqs;
    @endphp
    @if(!empty($faqs))
    <section class="faqsection bg-white p-4">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 text-center mb-5">
                    <p class="h3 fw-bold heading-bdr position-relative mb-0">Frequently Asked <span
                            class="darkredcolor">Questions</span></p>
                </div>
                <div class="col-xl-5 text-center">
                    <img src="{{ asset('assets/images/faqdisplay.gif') }}" class="img-fluid mb-3" width="200"
                        height="200" alt="faq"
                        onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                    <span class="h5 text-black d-block fw-bold">Explore Our FAQs</span>
                    <p class="fs-15">Find quick answers to commonly asked questions and understand how things work around here.</p>
                </div>
                <div class="col-xl-6 offset-xl-1">
                    <div class="accordion custom-accordion" id="faqAccordion">
                        @foreach ($faqs as $i => $faq)
                        @php $faqId = "faq_{$i}"; @endphp
                        <div class="accordion-item">
                            <span class="accordion-header" id="heading{{ $faqId }}">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#{{ $faqId }}" aria-expanded="false" aria-controls="{{ $faqId }}">
                                    {!! $faq['question'] !!}
                                </button>
                            </span>
                            <div id="{{ $faqId }}" class="accordion-collapse collapse"
                                aria-labelledby="heading{{ $faqId }}" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    {!! $faq['answer'] !!}
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @if($hasMoreFaqs)
                        <div class="text-center mt-3">
                            <button class="btn btn-primary" wire:click="loadMoreFaq">
                                Load More
                            </button>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    @if($isPreview)
    <div class="preview-bottom-bar bottom-0 start-0 end-0 text-white py-3 px-4 d-flex align-items-center justify-content-between flex-wrap gap-3 w-100">
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <span class="preview-bottom-bar-badge bg-white fs-14 fw-bold text-uppercase py-1 px-3 rounded-1 text-nowrap">⚠ Not Live</span>
            <div>
                <div class="preview-bottom-bar-title">This page is in preview mode and is not indexed by search engines. </div>
                <div class="preview-bottom-bar-sub fs-6 mt-1">

                    @if($isScheduled && $scheduledAt)
                    🕐 Scheduled to go live: <strong>{{ \Carbon\Carbon::parse($scheduledAt)->format('d M Y, h:i A') }}</strong>
                    @endif
                </div>
            </div>
        </div>

        <div>
            <p class="mb-0 fs-4 fw-bold"> Get in Touch: <a href="https://t.me/CryptoDisplayio" target="_blank" class="text-decoration-none fw-bold text-white" rel="nofollow noopener noreferrer" title="@Content_coingabbar"><img width="25" height="26" src="{{ URL::asset('assets/images/telegram.png') }}" alt="Telegram"></a></p>
        </div>

        {{-- Diagonal watermark overlay --}}
        <div class="preview-watermark-overlay top-0 start-0 w-100 h-100 overflow-hidden">
            @for($i = 0; $i < 8; $i++)
                <div class="preview-watermark-row position-absolute text-center text-nowrap" style="top: {{ $i * 14 }}%;">
                PREVIEW &nbsp; PREVIEW &nbsp; PREVIEW &nbsp; PREVIEW &nbsp; PREVIEW
        </div>
        @endfor
    </div>
</div>
@endif
@if($isSeoCheck)
<div class="preview-bottom-bar bottom-0 start-0 end-0 text-white py-3 px-4 d-flex align-items-center justify-content-between flex-wrap gap-3 w-100">
    <div class="d-flex align-items-center gap-3 flex-wrap">
        <span class="preview-bottom-bar-badge bg-white fs-14 fw-bold text-uppercase py-1 px-3 rounded-1 text-nowrap">⚠ Not Live</span>
        <div>
            <div class="preview-bottom-bar-title">This page is in preview mode and is not indexed by search engines.</div>
            <div class="preview-bottom-bar-sub fs-6 mt-1">
                Contact the admin now to make this webpage live and indexable.
            </div>
        </div>
    </div>
    <div>

        <p class="mb-0 fs-4 fw-bold">
            Contact us on :<a href="https://t.me/CryptoDisplayio" target="_blank" class="text-decoration-none fw-bold text-white" rel="nofollow noopener noreferrer" title="@Content_coingabbar"> <img width="25" height="26" src="{{ URL::asset('assets/images/telegram.png') }}" alt="Telegram"></a>
            </a>
        </p>
    </div> {{-- Diagonal watermark overlay --}}
    <div class="preview-watermark-overlay top-0 start-0 w-100 h-100 overflow-hidden">
        @for($i = 0; $i < 8; $i++) <div class="preview-watermark-row position-absolute text-center text-nowrap" style="top: {{ $i * 14 }}%;">
            PREVIEW &nbsp; PREVIEW &nbsp; PREVIEW &nbsp; PREVIEW &nbsp; PREVIEW
    </div>
    @endfor
</div>
</div>
@endif
</div>

@push('scripts')
<script>
    document.querySelectorAll('.bg-detailheading table').forEach(function(table) {
    const wrapper = document.createElement('div');
    wrapper.classList.add('table-responsive');
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
});
</script>
@endpush