<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $news->title }} - Desa Pelem</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <style>
        :root {
            --primary-color: #198754;
            /* Warna hijau utama */
            --secondary-color: #6c757d;
            --text-dark: #2c3e50;
            --text-light: #34495e;
            --bg-light: #f8f9fa;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--bg-light);
        }

        /* === IMPROVEMENT: Konsistensi Warna Hijau === */
        .btn-primary,
        .bg-primary {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
        }

        .btn-primary:hover {
            background-color: #157347 !important;
            border-color: #146c43 !important;
        }

        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: white;
        }

        .breadcrumb-item a,
        .text-primary {
            color: var(--primary-color) !important;
            text-decoration: none;
        }

        .breadcrumb-item a:hover {
            text-decoration: underline;
        }

        /* === IMPROVEMENT: Layout Artikel & Tipografi === */
        .article-title {
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1.3;
            color: var(--text-dark);
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--secondary-color);
            font-size: 0.9rem;
        }

        .category-badge {
            display: inline-block;
            background: var(--primary-color);
            color: white;
            font-weight: 500;
            border-radius: 20px;
            padding: 0.4rem 1rem;
            text-decoration: none;
            transition: background-color 0.2s ease;
        }

        .category-badge:hover {
            background-color: #157347;
            color: white;
        }

        .article-content {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-light);
        }

        .article-content p {
            margin-bottom: 1.5rem;
        }

        .article-content blockquote {
            border-left: 4px solid var(--primary-color);
            padding-left: 1.5rem;
            margin: 2rem 0;
            font-style: italic;
            color: var(--secondary-color);
        }

        .article-image img {
            width: 100%;
            border-radius: 12px;
        }

        .news-article {
            background: white;
            padding: 2.5rem;
            border-radius: 1rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
        }

        /* === IMPROVEMENT: Tombol Bagikan yang Konsisten === */
        .share-btn {
            border-radius: 20px;
            transition: all 0.2s ease-in-out;
        }

        .share-btn:hover {
            transform: translateY(-2px);
            color: white !important;
        }

        /* Warna hover spesifik untuk tiap tombol */
        .share-btn.facebook:hover {
            background-color: #1877F2;
            border-color: #1877F2;
        }

        .share-btn.twitter:hover {
            background-color: #1DA1F2;
            border-color: #1DA1F2;
        }

        .share-btn.whatsapp:hover {
            background-color: #25D366;
            border-color: #25D366;
        }

        .share-btn.copy-link:hover {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }

        /* === IMPROVEMENT: Sidebar & Kartu === */
        .sidebar {
            position: sticky;
            top: 2rem;
            /* Jarak dari atas saat sticky */
        }

        .sidebar .card {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
        }

        .sidebar .card-header {
            background-color: white;
            border-bottom: 1px solid #eee;
            border-radius: 1rem 1rem 0 0 !important;
        }

        .related-news-item a:hover h6 {
            color: var(--primary-color);
        }

        @media (max-width: 991px) {
            .sidebar {
                position: static;
            }

            /* Matikan sticky di mobile */
        }

        @media (max-width: 768px) {
            .article-title {
                font-size: 2rem;
            }

            .news-article {
                padding: 1.5rem;
            }
        }
    </style>
</head>

<body>

    <main class="py-5">
        <div class="container">
            <nav aria-label="breadcrumb" class="mb-4">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i
                                class="bi bi-house me-1"></i>Beranda</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('news.index') }}">Berita</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ Str::limit($news->title, 40) }}</li>
                </ol>
            </nav>

            <div class="row gx-lg-5">
                <div class="col-lg-8" data-aos="fade-up" data-aos-delay="100">
                    <article class="news-article">
                        <header class="article-header mb-4">
                            <h1 class="article-title mb-3">{{ $news->title }}</h1>
                            <div class="article-meta">
                                <a href="{{ route('news.index', ['category' => $news->category]) }}"
                                    class="category-badge">{{ $news->category }}</a>
                                <span class="d-flex align-items-center"><i
                                        class="bi bi-calendar3 me-2"></i>{{ $news->created_at->format('d F Y') }}</span>
                                <span class="d-flex align-items-center"><i
                                        class="bi bi-eye me-2"></i>{{ $news->views }} kali dibaca</span>
                            </div>
                        </header>

                        @if ($news->image)
                            <div class="article-image mb-4">
                                <img src="{{ asset($news->image) }}" alt="{{ $news->title }}"
                                    class="img-fluid shadow-sm">
                            </div>
                        @endif

                        @php use Mews\Purifier\Facades\Purifier; @endphp
                        <div class="article-content">
                            {!! Purifier::clean($news->content, 'news') !!}
                        </div>


                        <div class="article-share mt-5 pt-4 border-top">
                            <h6 class="mb-3 fw-bold">Bagikan artikel ini:</h6>
                            <div class="d-flex gap-2 flex-wrap">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}"
                                    target="_blank" class="btn btn-outline-secondary share-btn facebook"><i
                                        class="bi bi-facebook me-2"></i>Facebook</a>
                                <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($news->title) }}"
                                    target="_blank" class="btn btn-outline-secondary share-btn twitter"><i
                                        class="bi bi-twitter me-2"></i>Twitter</a>
                                <a href="https://wa.me/?text={{ urlencode($news->title . ' - ' . request()->url()) }}"
                                    target="_blank" class="btn btn-outline-secondary share-btn whatsapp"><i
                                        class="bi bi-whatsapp me-2"></i>WhatsApp</a>
                                <button onclick="copyToClipboard('{{ request()->url() }}')"
                                    class="btn btn-outline-secondary share-btn copy-link"><i
                                        class="bi bi-link-45deg me-2"></i>Salin Link</button>
                            </div>
                        </div>

                        <div class="article-footer mt-4 pt-4 border-top text-center">
                            <a href="{{ route('news.index') }}" class="btn btn-primary">
                                <i class="bi bi-arrow-left me-2"></i>Kembali ke Daftar Berita
                            </a>
                        </div>

                    </article>
                </div>

                <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="sidebar">
                        @if ($relatedNews->count() > 0)
                            <div class="card mb-4">
                                <div class="card-header bg-white">
                                    <h5 class="mb-0 fw-bold"><i class="bi bi-newspaper me-2 text-primary"></i>Berita
                                        Terkait</h5>
                                </div>
                                <div class="list-group list-group-flush">
                                    @foreach ($relatedNews as $related)
                                        <a href="{{ route('news.show', $related->slug) }}"
                                            class="list-group-item list-group-item-action related-news-item">
                                            <div class="d-flex w-100">
                                                @if ($related->image)
                                                    <img src="{{ asset($related->image) }}"
                                                        alt="{{ $related->title }}" class="rounded me-3"
                                                        style="width: 80px; height: 60px; object-fit: cover;">
                                                @else
                                                    <div class="bg-light rounded me-3 d-flex align-items-center justify-content-center"
                                                        style="width: 80px; height: 60px; flex-shrink: 0;"><i
                                                            class="bi bi-image text-muted"></i></div>
                                                @endif
                                                <div>
                                                    <h6 class="mb-1 fw-bold text-dark">
                                                        {{ Str::limit($related->title, 55) }}</h6>
                                                    <small
                                                        class="text-muted">{{ $related->created_at->format('d M Y') }}</small>
                                                </div>
                                            </div>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <div class="card">
                            <div class="card-header bg-white">
                                <h5 class="mb-0 fw-bold"><i class="bi bi-tags me-2 text-primary"></i>Kategori</h5>
                            </div>
                            <div class="list-group list-group-flush">
                                <a href="{{ route('news.index') }}" class="list-group-item list-group-item-action"><i
                                        class="bi bi-grid me-2"></i>Semua Kategori</a>
                                @foreach (['Infrastruktur', 'Ekonomi', 'Kesehatan', 'Budaya', 'Pemerintahan', 'Pendidikan', 'Lingkungan', 'Teknologi'] as $cat)
                                    <a href="{{ route('news.index', ['category' => $cat]) }}"
                                        class="list-group-item list-group-item-action">{{ $cat }}</a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <script>
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true
        });

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function() {
                const button = event.target.closest('button');
                const originalHtml = button.innerHTML;
                button.innerHTML = '<i class="bi bi-check-lg me-2"></i>Tersalin!';
                button.classList.add('btn-success', 'text-white');
                button.classList.remove('btn-outline-secondary');

                setTimeout(function() {
                    button.innerHTML = originalHtml;
                    button.classList.remove('btn-success', 'text-white');
                    button.classList.add('btn-outline-secondary');
                }, 2000);
            });
        }
    </script>
</body>

</html>
