{{-- resources/views/articles/show.blade.php --}}
@extends('layouts.app')

@section('content')
    <style>
        .card {
            border: none !important;
        }

        .card-title {
            /* font-family: Georgia, 'Times New Roman', Times, serif; */
            font-family: Oswald Bold !important;
            font-size: 40px !important;
            font-weight: 600;
        }

        #p::first-letter {
            initial-letter: 2;
            margin-right: 1px;
            font-size: 12px !important;
            color: #6d6d6f;
            font-family: italic;

        }

        .social-media-icons {
            display: flex;
            justify-content: left;
            align-items: left;
            gap: 10px;
            padding: 10px;
            margin-top: -1rem;
        }

        .social-icon {
            display: flex;
            justify-content: center;
            align-items: left;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 16px;
            color: white;
            padding-top: 8px;
            background-color: #555;
            transition: background-color 0.3s ease;
            text-decoration: none;
        }

        .social-icon:hover {
            opacity: 0.8;
        }

        .social-icon.facebook {
            background-color: #3b5998;
        }

        .social-icon.twitter {
            background-color: #00acee;
        }

        .social-icon.instagram {
            background-color: #C13584;
        }

        .social-icon.linkedin {
            background-color: #0e76a8;
        }

        .writer-photo {
            width: 50px !important;
            height: 50px !important;

            border-radius: 50%;
        }

        .image-credit {
            font-family: monospace;
            font-size: 13px !important;
            font-weight: 300 !important;
            color: #00acee;
        }

        .divider-1 {
            border-bottom: 1px solid grey;
            border-top: 1px solid grey;
            background-color: #161616;
            height: 0.2px !important;
            margin: 0.5em 0px 1.5em;
            width: 820px !important;
            margin: 1px auto;
        }

        .divider-1 span {
            display: block;
            width: 50px;
            height: 10px;
            background-color: grey;
            margin-top: -4px !important;
        }

        .poa {
            font-size: 25px;
            font-family: Montserrat;
            -webkit-font-smoothing: antialiased;
        }

        .poe {
            display: inline-block;
            /* Makes the container shrink to the width of the content */
            background-color: red;
            /* Red background for the text box */
            color: white;
            /* White text */
            padding: 5px 10px;
            /* Padding around the text */
            font-family: Arial, sans-serif;
            /* Font styling */
            font-size: 1rem;
            /* Font size for the author */
        }
    </style>
    @include('partials.navbar')
    @include('articles.partials.home-css')
@include('partials.news_ticker')
    <div class="container">

        <div class="col-md-10" style="margin: 1px auto;  padding: 25px;">
            <p class="badge mb-2">{{ $article->category ? $article->category->name : ' ' }}</p>
            <h1 class="card-titl mb-3 mt-2">{{ $article->title }}</h1>
            <hr>
            <p class="po mt-3" id="p" style="font-size: 24px; font-family:Times">
                {!! Str::words(strip_tags($article->description), 50, '...') !!}

            </p>
            @if ($article->user && $article->user->avatar)
                <img src="{{ asset('storage/' . $article->user->avatar) }}" alt="{{ $article->user->name }}"
                    class="writer-photo mt-3" style="max-width:100px;height:auto;object-fit:cover;border-radius:50%;">
            @endif
            {{-- <img src="{{ asset("storage/{$article->writer_photo}") }}" alt="Writer Photo"
                style="max-width: 100px; height: auto;" class="writer-photo mt-3"> --}}

            By {{ $article->user->name ?? 'Admin' }}&nbsp; | <span style="color: blue">
                Estimated Reading Time: {{ $readingTime }} min | <span style="color:green">
                    Total Words:
                </span>
                {{ $wordCount }} | <span style="font-size: 0.9rem; color:brown">
                    Published: {{ $article->created_at->format(' j F Y') }}
                </span>
            </span>
            <span>
                | <i class="fas fa-eye"></i> {{ number_format($article->views) }} views
            </span>
            @if ($article->article_image)
                @php
                    $path = $article->article_image;

                    if (str_starts_with($path, 'uploads/')) {
                        $imageUrl = asset($path); // old images
                    } else {
                        $imageUrl = asset('storage/' . $path); // new images
                    }
                @endphp

                <img src="{{ $imageUrl }}" alt="Article Image" class="article-image mt-3"
                    style="width:100%; height:685px; object-fit:cover;">
            @endif
            <br>
            <span style="color:#d92128 ">
                {{ $article->credit ? 'Image Credit: ' . $article->credit : '' }}
            </span>
            <br>

            <br />

            <div class="" style="font-size: 23px;font-family: Montserrat;">
                {!! $article->content !!}
            </div>

            <div class="author-section mt-3">
                <p><strong>{{ $article->user->name }}</strong></p>
                <p style="margin-top:-16px !important">{{ $article->user->bio }}</p>
                <a href="{{ route('author.articles', $article->user->id) }}" class="btn btn-dark mt-1 px-4">
                    View More Articles by {{ $article->user->name }}
                </a>
            </div>
            <br>
            <p style="font-size:16px"><em>This is an opinion piece. The views expressed in this article are those of just
                    the author.</em></p>
        </div>
    </div>
    <br />
    <br />
@endsection