@extends('layouts.app')


@section('content')
    <div class="container mt-1" style="max-width: 1400px; font-family: 'Georgia', 'Times', 'Times New Roman', serif;">

        <!-- Back Link -->

        <h1 class="name mt-4" style="text-align:center">Hot Takes | Africa <span style="color:#155E95">Tech</span><span
                style="color:#00796b">
                Insights</span></h1>
        <!-- Opinion Title -->
        <a href="{{ url()->previous() }}" class="mb-3 d-inline-block text-decoration-none text-dark">
            <i class="fa fa-chevron-left"></i> Back
        </a>
        <h1 class="opinion-title fw-bold mb-3" style="font-size: 2.5rem; line-height: 1.2;">
            {{ $opinion->title }}
        </h1>

        <!-- Meta Info -->
        <div class="d-flex flex-wrap text-muted mb-4" style="font-size: 0.9rem; gap: 15px;">
            <span><i class="fa fa-calendar-alt"></i> {{ $opinion->created_at->format('F d, Y') }}</span>
            <span><i class="fa fa-eye"></i> {{ $opinion->views }} views</span>
            <span><i class="fa fa-book-reader"></i> {{ $readingTime }} min read</span>
            <span>📝 {{ $wordCount }} words</span>
        </div>

        <!-- Image + Brief Description Side by Side -->
        <div class="row mb-7 align-items-center">
            @if ($opinion->image)
                <div class="col-md-7 mb-3 mb-md-0">
                    <img src="{{ asset('storage/' . $opinion->image) }}" class="img-fluid rounded"
                        alt="{{ $opinion->title }}">
                </div>
            @endif

            <div class="col-md-5">
                <div class="lead"
                    style="font-size: 2.25rem; line-height: 1.4;font-family: nyt-cheltenham-text-cond, nyt-cheltenham, cheltenham-fallback-georgia, cheltenham-fallback-noto, georgia, 'times new roman', times, serif;font-style: italic;color:#0D1A63">
                    {!! $opinion->brief_description !!}
                </div>
            </div>
        </div>
        <br>
        <!-- Opinion Body -->
        <div class="article-body mb-4 poa" style="font-size: 1.3rem; line-height: 1.3; color: #222;">
            {!! $opinion->opinion !!}
        </div>
        <!-- Source Link -->
        @if ($opinion->source_link)
            <div class="mb-4">
                <a href="{{ $opinion->source_link }}" target="_blank" class="badge bg-light text-dark border">
                    Source
                </a>
            </div>
        @endif
        <!-- Share Icons -->
        <div class="d-flex gap-2 mb-4">
            @php
                $url = urlencode(url()->current());
            @endphp
            <a href="https://twitter.com/intent/tweet?url={{ $url }}" target="_blank"
                class="share-icon rounded-circle d-flex align-items-center justify-content-center">
                <i class="fab fa-twitter"></i>
            </a>
            <a href="https://www.facebook.com/sharer/sharer.php?u={{ $url }}" target="_blank"
                class="share-icon rounded-circle d-flex align-items-center justify-content-center">
                <i class="fab fa-facebook-f"></i>
            </a>

            <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ $url }}" target="_blank"
                class="share-icon rounded-circle d-flex align-items-center justify-content-center">
                <i class="fab fa-linkedin-in"></i>
            </a>

            <a href="https://api.whatsapp.com/send?text={{ $url }}" target="_blank"
                class="share-icon rounded-circle d-flex align-items-center justify-content-center">
                <i class="fab fa-whatsapp"></i>
            </a>
        </div>

        <!-- Commentary Author -->
        <p class="text-muted" style="font-size: 0.9rem;">
            Commentary by <span class="fw-bold">Africa<span style="color:#155E95">Tech</span><span
                    style="color:#00796b">Insights</span></span>
        </p>

        <br>
        <br>
        <h5 class="fw-bold mb-3">🗂️ All Our Commentaries</h5>

        <div class="row">
            @foreach ($opinions as $item)
                <div class="col-md-3 mb-4">
                    <div class="card opinion-card h-100 shadow-lg border-0">

                        @if ($item->image)
                            <img src="{{ asset('storage/' . $item->image) }}" class="card-img-top"
                                style="height:180px; object-fit:cover;">
                        @endif

                        <div class="card-body d-flex flex-column">
                            @if ($loop->index == 0)
                                <span class="badg text-danger" style="">
                                    🔥 MOST READ
                                </span>
                            @endif
                            <h6 class="card-title fw-bold">
                                {{ Str::limit($item->title, 50) }}
                            </h6>

                            <span class="card-text text-muted small mt-2">
                                {{ Str::limit(strip_tags($item->content), 80) }}
                            </span>

                            <!-- ✅ FIXED HERE -->
                            <span class="text-muted small">
                                <i class="fa fa-calendar-alt"></i>
                                Posted: {{ $item->created_at->format('d F Y') }}
                            </span>

                            <div class="mt-auto">
                                <a href="{{ route('opinions.show', $item->id) }}" class="btn btn-dark btn-sm w-100 mt-2">
                                    Read Opinion →
                                </a>
                            </div>

                        </div>

                    </div>
                </div>
            @endforeach
        </div>
        <br>
        <br>
        <!-- Styles -->
        <style>
            .share-icon {
                width: 40px;
                height: 40px;
                border: 1.5px solid #222;
                color: #222;
                transition: all 0.3s ease;
                text-decoration: none;
                font-size: 1rem;
            }

            .share-icon:hover {
                transform: scale(1.1);
                color: #fff;
                background-color: #222;
            }

            .share-icon:hover i.fab.fa-twitter {
                color: #1DA1F2;
                background: transparent;
            }

            .share-icon:hover i.fab.fa-facebook-f {
                color: #1877F2;
                background: transparent;
            }

            .share-icon:hover i.fab.fa-linkedin-in {
                color: #0A66C2;
                background: transparent;
            }

            .share-icon:hover i.fab.fa-whatsapp {
                color: #25D366;
                background: transparent;
            }
        </style>
    @endsection