@push('metadata')
@php
$pageId = 36;
$mTitle = @$author->seo_title;
$mDescr = @$author->meta_description;
$faqs = $author->faqs ?? '[]';
$mKWords = $author->meta_keywords;
$mUrl = url()->current();
$mImage = $author->image ?? '' ;
@endphp
@push('pageId')
<script>
    window.pageId = "{{ $pageId ?? '' }}";
</script>
@endpush
<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')}}" />
<meta property="og:site_name" content="Crypto Presale" />
<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 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')}}" />
@endpush

<div>
    @push('styles')
    <style>
        .share-button {
            background: none;
            cursor: pointer;
        }

        .share-button:hover {
            opacity: 0.8;
        }

        .author-profile {
            width: 48px;
            height: 48px;
        }
    </style>
    @endpush

    <section class="brdcrumb">
        <div class="container">
            <ul class="mb-0">
                <li>
                    <a href="{{ URL::to('/') }}" title="Home">Home</a>
                    <i class="fa fa-chevron-right small text-dark"></i>
                </li>
                <li>
                    <a href="{{ URL::to('crypto-author') }}"
                        title="Meet Crypto Writers & Authors at Crypto Presale News">Crypto Authors</a>
                    <i class="fa fa-chevron-right small text-dark"></i>
                </li>
                <li>
                    <p class="h6 fw-normal mb-0">{{ $author->dispaly_name }}</p>
                </li>
            </ul>
        </div>
    </section>

    <section>
        <div class="container my-4">
            <div class="row">
                <div class="col-12 border-bottom">
                    <div class="p-4">
                        <div class="d-flex align-items-start gap-4 flex-wrap flex-sm-nowrap">
                            <div class="author-avatar rounded-circle d-flex align-items-center justify-content-center">
                                <img src="{{ $author->image ?? '' }}" class="rounded-circle" alt="{{ $author->display_name ?? $author->dispaly_name }}" height="84" width="84" loading="lazy" />
                            </div>
                            <div class="author-details">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h1 class="fs-4 fw-bold mb-0">{{ $author->display_name ?? $author->dispaly_name }}</h1>
                                    <div class="d-flex gap-1">
                                        @if (!empty($author['user']['twitter_url']))
                                            <a href="{{ CommonHelper::formatTwitterUrl($author['user']['twitter_url']) }}" 
                                            target="_blank" 
                                            rel="nofollow noopener noreferrer"
                                            class="rounded-2 px-2 catbox d-flex justify-content-center align-items-center text-decoration-none p-2 shadow-sm">
                                                <i class="fa-brands fa-x-twitter fs-13"></i>
                                            </a>
                                        @endif

                                        @if (!empty($author['user']['linkedin_url']))
                                            <a href="{{ CommonHelper::formatLinkedinUrl($author['user']['linkedin_url']) }}" 
                                            target="_blank" 
                                            rel="nofollow noopener noreferrer"
                                            class="rounded-2 px-2 catbox d-flex justify-content-center align-items-center text-decoration-none p-2 shadow-sm">
                                            
                                                <i class="fa-brands fa-linkedin-in fs-13"></i>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                                <span class="fs-13 text-uppercase bluetext fw-semibold">{{ $author->specialization }}</span>
                                <div class="fs-14 my-2">
                                    {!! $author->about_us !!}
                                </div>
                                <div class="d-flex gap-5 align-items-center mt-4 flex-wrap">
                                    @php
                                     $totalAll = $totalNews + $totalPR;
                                    @endphp
                                    <div>
                                        <span class="fs-6 fw-bold d-block lh-1">{{ $totalAll }}</span>
                                        <span class="fs-11 text-uppercase text-secondary fw-semibold opacity-50">articles</span>
                                    </div>

                                    @php
                                        $createdAt = \Carbon\Carbon::parse($author->created_at);

                                        $months = floor($createdAt->floatDiffInMonths(now()));

                                        $years = floor($months / 12);

                                        $experience = $years > 0
                                            ? $years
                                            : $months;

                                        $experienceLabel = $years > 0
                                            ? ($years > 1 ? 'Years' : 'Year')
                                            : ($months > 1 ? 'Months' : 'Month');
                                    @endphp

                                    <div>
                                        <span class="fs-6 fw-bold d-block lh-1">{{ $experience }} {{ $experienceLabel }}</span>
                                        <span class="fs-11 text-uppercase text-secondary fw-semibold opacity-50">experience</span>
                                    </div>
                                    <div>
                                        <span class="fs-6 fw-bold d-block lh-1">{{ $createdAt->format('Y') }}</span>
                                        <span class="fs-11 text-uppercase text-secondary fw-semibold opacity-50">active since</span>
                                    </div>
                                    <div>
                                        <span class="fs-6 fw-bold d-block lh-1">English</span>
                                        <span class="fs-11 text-uppercase text-secondary fw-semibold opacity-50">languages</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="nav-buttons d-flex justify-content-between mt-5 mb-0 flex-wrap">
                            @if($prevAuthor)
                            <a class="prev-btn interlink-btn text-white border-0 rounded-2 cursor-pointer text-decoration-none d-flex align-center gap-2"
                                href="{{ URL::to('crypto-author/' . $prevAuthor['slug']) }}"
                                title="{{ $prevAuthor['display_name'] ?? $prevAuthor['dispaly_name'] }}">
                                <i class="fa fa-arrow-left me-2"></i>
                                {{ $prevAuthor['display_name'] ?? $prevAuthor['dispaly_name'] }}
                            </a>
                            @else
                            <span></span>
                            @endif

                            @if($nextAuthor)
                            <a class="next-btn interlink-btn text-white border-0 rounded-2 cursor-pointer text-decoration-none d-flex align-center gap-2"
                                href="{{ URL::to('crypto-author/' . $nextAuthor['slug']) }}"
                                title="{{ $nextAuthor['display_name'] ?? $nextAuthor['dispaly_name'] }}">
                                {{ $nextAuthor['display_name'] ?? $nextAuthor['dispaly_name'] }}
                                <i class="fa fa-arrow-right ms-2"></i>
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container my-4">
            <div class="row">
                <div class="col-xl-9">
                    <div class="text-start">
                        <div class="headingfont">
                            <h2 class="mb-0 fs-4 fw-semibold">All Articles by {{ $author->dispaly_name ?? 'Author' }}</h2>
                        </div>
                    </div>
                    <div class="filterinnerpage">
                        <ul class="nav nav-pills w-fit m-auto my-4 justify-content-around gap-3" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                {{-- <button
                                    class="nav-link position-relative rounded-pill {{ $activeTab == 'news' ? 'active' : '' }}"
                                    id="news-tab"
                                    data-bs-toggle="pill"
                                    data-bs-target="#News"
                                    type="button"
                                    role="tab"
                                    aria-controls="News"
                                    aria-selected="{{ $activeTab == 'news' ? 'true' : 'false' }}">
                                    News ({{ $totalNews }})
                                </button> --}}

                                <button
                                    wire:click="setActiveTab('news')"
                                    class="nav-link position-relative rounded-pill {{ $activeTab == 'news' ? 'active' : '' }}"
                                    id="news-tab"
                                    data-bs-toggle="pill"
                                    data-bs-target="#News"
                                    type="button">
                                    News ({{ $totalNews }})
                                </button>
                            </li>

                            <li class="nav-item" role="presentation">
                                {{-- <button
                                    class="nav-link position-relative rounded-pill {{ $activeTab == 'pr' ? 'active' : '' }}"
                                    id="pr-tab"
                                    data-bs-toggle="pill"
                                    data-bs-target="#pr"
                                    type="button"
                                    role="tab"
                                    aria-controls="pr"
                                    aria-selected="{{ $activeTab == 'pr' ? 'true' : 'false' }}">
                                    Press Release ({{ $totalPR }})
                                </button> --}}

                                <button
                                    wire:click="setActiveTab('pr')"
                                    class="nav-link position-relative rounded-pill {{ $activeTab == 'pr' ? 'active' : '' }}"
                                    id="pr-tab"
                                    data-bs-toggle="pill"
                                    data-bs-target="#pr"
                                    type="button">
                                    Press Release ({{ $totalPR }})
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content" id="pills-tabContent">
                            {{-- News Tab --}}
                            <div class="tab-pane fade {{ $activeTab == 'news' ? 'show active' : '' }}" id="News" role="tabpanel" aria-labelledby="news-tab">
                                @forelse($news as $newsItem)
                                <div class="row g-0 card-group mb-3 rounded-3 overflow-hidden my-4 flex-column flex-md-row">
                                    <div class="col-xxl-3 col-xl-3 col-lg-4 col-md-5 col-12 px-0">
                                        <a href="{{ URL::to($newsItem->alias) }}" title="{{ $newsItem->title }}">
                                            <img src="{{ $newsItem->image }}" class="w-100 h-100 rounded-3"
                                                alt="{{ $newsItem->img_alt_title ?: $newsItem->title }}"
                                                width="241" height="147" loading="lazy">
                                            <span class="d-none">{{ $newsItem->title }}</span>
                                        </a>
                                    </div>

                                    <div class="col-xxl-9 col-xl-9 col-lg-8 col-md-7 col-12 px-0 mb-0 card flex-auto bg-transparent border-0 shadow-none">
                                        <div class="card-body text-decoration-none py-md-2 border-0">
                                            <a href="{{ URL::to($newsItem->alias) }}" class="text-dark text-decoration-none py-md-2" title="{{ $newsItem->title }}">
                                                <span class="fs-5 fw-semibold one-line-text">{{ $newsItem->title }}</span>
                                            </a>

                                            <div class="d-flex justify-content-between align-items-center my-2 flex-wrap position-relative">
                                                <div class="newslistingleft d-flex align-items-center gap-3">
                                                    <span class="fs-14 d-flex align-items-center gap-2">
                                                        <i class="fa-solid fa-circle-user fs-6"></i>
                                                        {{ $author->dispaly_name ?? 'Unknown' }}
                                                    </span>
                                                    <span class="fs-14 d-flex align-items-center gap-2">
                                                        <i class="fa-solid fa-calendar"></i>
                                                        {{ $newsItem->created_at->format('d-m-Y') }}
                                                    </span>
                                                </div>

                                                <div class="d-flex justify-content-between align-items-center mt-auto gap-2">
                                                    <div class="d-flex align-items-center author-news" style="cursor: pointer;">
                                                        <x-like-card :id="@$newsItem->id" :type="'news'"
                                                            :liked="@$newsItem->liked"
                                                            :likescounts="@$newsItem->likes_counts"
                                                            :likd="1"
                                                            :favorite="@$newsItem->is_liked" />
                                                    </div>

                                                    <button type="button" class="share-button border-0 cursor-pointer"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#shareModal"
                                                        wire:click="setShareUrl('{{ URL::to($newsItem->alias) }}')">
                                                        <i class="fa-solid fa-share-nodes"></i> Share
                                                    </button>
                                                </div>
                                            </div>

                                            @if(session()->has('success_' . $newsItem->id))
                                            <div class="alert alert-success alert-dismissible fade show py-1 mt-2" role="alert">
                                                <small>{{ session('success_' . $newsItem->id) }}</small>
                                                <button type="button" class="btn-close py-2" data-bs-dismiss="alert"></button>
                                            </div>
                                            @endif
                                        </div>

                                        <div class="card-footer border-0 py-0 bg-transparent">
                                            <p class="two-line-text text-muted mb-1">
                                                {{ \Illuminate\Support\Str::limit(strip_tags($newsItem->short_description ?? $newsItem->description), 200) }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                <div class="text-center py-5">
                                    <i class="fa fa-newspaper fs-1 text-muted"></i>
                                    <p class="text-muted mt-3">No news articles found for this author.</p>
                                </div>
                                @endforelse

                                {{-- @if($totalNews > count($news))
                                <div class="mt-5 text-center">
                                    <button type="button" wire:click="loadMoreNews" class="text-decoration-none mainbluebtn rounded-3">
                                        Load More
                                    </button>
                                </div>
                                @endif --}}

                                @if($news->hasPages())
                                <div class="mt-4" wire:key="news-pagination">
                                    {{ $news->onEachSide(1)->links('vendor.pagination.bootstrap-5') }}
                                </div>
                                @endif
                            </div>

                            {{-- Press Release Tab --}}
                            <div class="tab-pane fade {{ $activeTab == 'pr' ? 'show active' : '' }}" id="pr" role="tabpanel" aria-labelledby="pr-tab">
                                @forelse($pressReleases as $prItem)
                                <div class="row g-0 card-group mb-3 rounded-3 overflow-hidden my-4 flex-column flex-md-row">
                                    <div class="col-xxl-3 col-xl-3 col-lg-4 col-md-5 col-12 px-0">
                                        <a href="{{ URL::to($prItem->alias) }}" title="{{ $prItem->title }}">
                                            <img src="{{ $prItem->image }}" class="w-100 h-100 rounded-3"
                                                alt="{{ $prItem->img_alt_title ?: $prItem->title }}"
                                                loading="lazy" width="241" height="147">
                                            <span class="d-none">{{ $prItem->title }}</span>
                                        </a>
                                    </div>

                                    <div class="col-xxl-9 col-xl-9 col-lg-8 col-md-7 col-12 px-0 mb-0 card flex-auto bg-transparent border-0 shadow-none">
                                        <div class="card-body text-decoration-none py-md-2 border-0">
                                            <a href="{{ URL::to($prItem->alias) }}" class="text-dark text-decoration-none py-md-2" title="{{ $prItem->title }}">
                                                <span class="fs-5 fw-semibold one-line-text">{{ $prItem->title }}</span>
                                            </a>

                                            <div class="d-flex justify-content-between align-items-center my-2 flex-wrap">
                                                <div class="newslistingleft d-flex align-items-center gap-3">
                                                    <span class="fs-14 d-flex align-items-center gap-2">
                                                        <i class="fa-solid fa-circle-user fs-6"></i>
                                                        {{ $author->dispaly_name ?? 'Unknown' }}
                                                    </span>
                                                    <span class="fs-14 d-flex align-items-center gap-2">
                                                        <i class="fa-solid fa-calendar"></i>
                                                        {{ $prItem->created_at->format('d-m-Y') }}
                                                    </span>
                                                </div>

                                                <div class="d-flex justify-content-between position-relative align-items-center mt-auto gap-2">
                                                    <div class="d-flex align-items-center" style="cursor: pointer;">
                                                        <x-like-card :id="@$prItem->id" :type="'news'"
                                                            :liked="@$prItem->liked"
                                                            :likescounts="@$prItem->likes_counts"
                                                            :likd="1"
                                                            :favorite="@$prItem->is_liked" />
                                                    </div>

                                                    <button type="button" class="share-button border-0 cursor-pointer"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#shareModal"
                                                        wire:click="setShareUrl('{{ URL::to($prItem->alias) }}')">
                                                        <i class="fa-solid fa-share-nodes"></i> Share
                                                    </button>
                                                </div>
                                            </div>

                                            @if(session()->has('success_' . $prItem->id))
                                            <div class="alert alert-success alert-dismissible fade show py-1 mt-2" role="alert">
                                                <small>{{ session('success_' . $prItem->id) }}</small>
                                                <button type="button" class="btn-close py-2" data-bs-dismiss="alert"></button>
                                            </div>
                                            @endif
                                        </div>

                                        <div class="card-footer border-0 py-0 bg-transparent">
                                            <p class="two-line-text text-muted mb-1">
                                                {{ \Illuminate\Support\Str::limit(strip_tags($prItem->short_description ?? $prItem->description), 150) }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                <div class="text-center py-5">
                                    <i class="fa fa-file-alt fs-1 text-muted"></i>
                                    <p class="text-muted mt-3">No press releases found for this author.</p>
                                </div>
                                @endforelse

                               {{-- @if($totalPR > count($pressReleases))
                                <div class="mt-5 text-center">
                                    <button type="button" wire:click="loadMorePR" class="text-decoration-none mainbluebtn rounded-3">
                                        Load More
                                    </button>
                                </div>
                                @endif --}}

                                @if($pressReleases->hasPages())
                                <div class="mt-4" wire:key="pr-pagination">
                                    {{ $pressReleases->onEachSide(1)->links() }}
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Other Authors Sidebar --}}
                <div class="col-xl-3 mt-3 mt-xl-0">
                    <div class="position-sticky top-15">
                        <div class="border border-muted p-3 rounded-3">
                            <div class="">
                                <span class="fs-4 fw-semibold">Other Authors</span>
                            </div>
                            <div class="row">
                                @forelse($authorList as $otherAuthor)
                                @if($otherAuthor['id'] != $author->id)
                                <div class="col-xl-12 col-lg-4 col-sm-6 mt-3 text-center">
                                    <div class="borderblue project-box p-2 rounded-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="d-flex gap-2 align-items-center">
                                                <a href="/crypto-author/{{ $otherAuthor['slug'] }}"
                                                    class="text-decoration-none"
                                                    title="Meet {{ $otherAuthor['display_name'] ?? $otherAuthor['dispaly_name'] }}, Crypto Journalist at Crypto Presale News">
                                                    @if($otherAuthor['image'])
                                                    <img src="{{ $otherAuthor['image'] }}"
                                                        width="48" height="48" class="mx-auto rounded-circle"
                                                        alt="{{ $otherAuthor['display_name'] ?? $otherAuthor['dispaly_name'] }}">
                                                    @else
                                                    <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center author-profile">
                                                        <i class="fa fa-user text-white"></i>
                                                    </div>
                                                    @endif
                                                    <span
                                                        class="d-none">{{ $otherAuthor['display_name'] ?? $otherAuthor['dispaly_name'] }}</span>
                                                </a>
                                                <div class="text-start">
                                                    <a href="/crypto-author/{{ $otherAuthor['slug'] }}"
                                                        class="text-decoration-none"
                                                        title="Meet {{ $otherAuthor['display_name'] ?? $otherAuthor['dispaly_name'] }}, Crypto Journalist at Crypto Presale News">
                                                        <span class="fs-6 fw-semibold text-black d-block">
                                                            {{ \Illuminate\Support\Str::limit($otherAuthor['display_name'] ?? $otherAuthor['dispaly_name'], 15) }}
                                                        </span>
                                                    </a>
                                                    <span
                                                        class="fs-13 text-secondary one-line-text">{{ $otherAuthor['specialization'] ?? 'Writer' }}</span>
                                                </div>
                                            </div>
                                            <a href="/crypto-author/{{ $otherAuthor['slug'] }}"
                                                title="Read more about {{ $otherAuthor['display_name'] ?? $otherAuthor['dispaly_name'] }}"
                                                class="text-decoration-none text-black px-1">
                                                <i class="fa-solid fa-arrow-right-long"></i>
                                                <span class="d-none">Read more about
                                                    {{ $otherAuthor['display_name'] ?? $otherAuthor['dispaly_name'] }}
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                @empty
                                <div class="col-12 text-center py-3">
                                    <p class="text-muted">No other authors found.</p>
                                </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Page Content Section --}}
    @if($author->page_content)
    <section class="contentview">
        <div class="container my-3">
            <div class="row">
                <div class="col-xl-12">
                    <div class="details-page">
                        {!! $author->page_content !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    @include('livewire.common.share-modal')
    {{-- Share Modal --}}

</div>