@extends('layouts.layout1')
@section('title', 'Detail Artikel || KLINIK PKP JAWA 3')

@section('content')
    <style>
        /* CSS Custom Properties for dark mode */
        :root {
            --bg-primary: #f9fafb;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --text-primary: #1f2937;
            --text-secondary: #374151;
            --text-muted: #6b7280;
            --border-color: #e5e7eb;
        }

        [data-theme="dark"],
        body.dark-mode {
            --bg-primary: #1f2937;
            --bg-secondary: #111827;
            --bg-card: #374151;
            --text-primary: #f9fafb;
            --text-secondary: #e5e7eb;
            --text-muted: #9ca3af;
            --border-color: #4b5563;
        }

        /* Article Detail Hero */
        .article-hero {
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            padding: 3rem 2rem;
            position: relative;
            overflow: hidden;
        }

        [data-theme="dark"] .article-hero,
        body.dark-mode .article-hero {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        }

        .article-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
            background-size: cover;
        }

        .article-hero-content {
            position: relative;
            z-index: 1;
            max-width: 900px;
            margin: 0 auto;
        }

        .back-button {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            margin-bottom: 2rem;
            transition: all 0.3s ease;
        }

        .back-button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateX(-4px);
            color: white;
        }

        [data-theme="dark"] .back-button,
        body.dark-mode .back-button {
            background: rgba(255, 255, 255, 0.15);
        }

        [data-theme="dark"] .back-button:hover,
        body.dark-mode .back-button:hover {
            background: rgba(255, 255, 255, 0.25);
        }

        .article-hero-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .article-hero-category {
            display: inline-block;
            padding: 0.5rem 1rem;
            background: rgba(255, 255, 255, 0.95);
            color: var(--judges-base);
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 700;
        }

        .article-hero-badge {
            display: inline-block;
            padding: 0.5rem 1rem;
            background: linear-gradient(135deg, #005a66 0%,  #005a66 100%);
            color: white;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 700;
        }

        .article-hero-date {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: white;
            font-size: 0.875rem;
        }

        .article-hero-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: white;
            line-height: 1.3;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* Article Content */
        .article-content-section {
            padding: 4rem 2rem;
            background: #f9fafb;
        }

        [data-theme="dark"] .article-content-section,
        body.dark-mode .article-content-section {
            background: var(--bg-primary);
        }

        .article-content-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 2rem;
        }

        .article-main-content {
            min-width: 0;
        }

        .article-featured-image {
            width: 100%;
            max-height: 500px;
            object-fit: cover;
            border-radius: 20px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
            margin-bottom: 3rem;
        }

        .article-body {
            background: white;
            border-radius: 20px;
            padding: 3rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        [data-theme="dark"] .article-body,
        body.dark-mode .article-body {
            background: var(--bg-card);
        }

        .article-text {
            font-size: 1.125rem;
            line-height: 1.8;
            color: #374151;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        [data-theme="dark"] .article-text,
        body.dark-mode .article-text {
            color: var(--text-secondary);
        }

        .article-divider {
            height: 2px;
            background: linear-gradient(90deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            margin: 3rem 0;
            border-radius: 2px;
        }

        .article-footer {
            margin-top: 3rem;
            padding: 2rem;
            background: #f9fafb;
            border-radius: 16px;
            text-align: center;
        }

        [data-theme="dark"] .article-footer,
        body.dark-mode .article-footer {
            background: var(--bg-primary);
        }

        .article-footer-text {
            color: #6b7280;
            margin-bottom: 1.5rem;
        }

        [data-theme="dark"] .article-footer-text,
        body.dark-mode .article-footer-text {
            color: var(--text-muted);
        }

        .btn-back-to-list {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.875rem 1.75rem;
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            color: white;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-back-to-list:hover {
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
            color: white;
        }

        /* Loading */
        .loading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4rem;
            min-height: 60vh;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #e5e7eb;
            border-top-color: #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Error State */
        .error-state {
            text-align: center;
            padding: 4rem 2rem;
            min-height: 60vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .error-icon {
            font-size: 4rem;
            color: #ef4444;
            margin-bottom: 1rem;
        }

        .error-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 0.5rem;
        }

        [data-theme="dark"] .error-title,
        body.dark-mode .error-title {
            color: var(--text-primary);
        }

        .error-text {
            font-size: 1.125rem;
            color: #6b7280;
            margin-bottom: 2rem;
        }

        [data-theme="dark"] .error-text,
        body.dark-mode .error-text {
            color: var(--text-muted);
        }

        /* Sidebar */
        .article-sidebar {
            position: sticky;
            top: 2rem;
            height: fit-content;
        }

        .sidebar-section {
            background: white;
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            margin-bottom: 1.5rem;
        }

        [data-theme="dark"] .sidebar-section,
        body.dark-mode .sidebar-section {
            background: var(--bg-card);
        }

        .sidebar-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        [data-theme="dark"] .sidebar-title,
        body.dark-mode .sidebar-title {
            color: var(--text-primary);
        }

        .sidebar-title svg {
            color: var(--judges-base);
        }

        .related-article-item {
            display: flex;
            gap: 1rem;
            padding: 1rem 0;
            border-bottom: 1px solid #f3f4f6;
            transition: all 0.3s ease;
            text-decoration: none;
            color: inherit;
        }

        [data-theme="dark"] .related-article-item,
        body.dark-mode .related-article-item {
            border-bottom-color: var(--border-color);
        }

        .related-article-item:last-child {
            border-bottom: none;
        }

        .related-article-item:hover {
            transform: translateX(4px);
        }

        .related-article-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 12px;
            flex-shrink: 0;
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
        }

        .related-article-content {
            flex: 1;
            min-width: 0;
        }

        .related-article-category {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            background: #f3f4f6;
            color: var(--judges-base);
            border-radius: 8px;
            font-size: 0.625rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        [data-theme="dark"] .related-article-category,
        body.dark-mode .related-article-category {
            background: var(--bg-primary);
            color: var(--judges-base);
        }

        .related-article-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: #1f2937;
            line-height: 1.4;
            margin-bottom: 0.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        [data-theme="dark"] .related-article-title,
        body.dark-mode .related-article-title {
            color: var(--text-primary);
        }

        .related-article-item:hover .related-article-title {
            color: var(--judges-base);
        }

        .related-article-date {
            font-size: 0.75rem;
            color: #9ca3af;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        [data-theme="dark"] .related-article-date,
        body.dark-mode .related-article-date {
            color: var(--text-muted);
        }

        .sidebar-empty {
            text-align: center;
            padding: 2rem 1rem;
            color: #9ca3af;
            font-size: 0.875rem;
        }

        [data-theme="dark"] .sidebar-empty,
        body.dark-mode .sidebar-empty {
            color: var(--text-muted);
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .article-content-container {
                grid-template-columns: 1fr;
            }

            .article-sidebar {
                position: relative;
                top: 0;
            }
        }

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

            .article-body {
                padding: 2rem 1.5rem;
            }

            .article-text {
                font-size: 1rem;
            }

            .article-featured-image {
                max-height: 300px;
            }
        }
    </style>

    <!-- Local navbar-only dark toggle (only affects header on this page) -->
    <style>
        /* navbar dark variant: respond to either local `.navbar-dark` OR global theme flags */
        header.main-header.navbar-dark,
        [data-theme="dark"] header.main-header,
        body.dark-mode header.main-header,
        html.dark header.main-header {
            background: #0b1220 !important;
            box-shadow: 0 6px 30px rgba(2,6,23,0.45) !important;
        }

        header.main-header.navbar-dark .main-menu__brand-title,
        header.main-header.navbar-dark .main-menu__brand-subtitle,
        header.main-header.navbar-dark .main-menu__main-menu-box ul li a,
        header.main-header.navbar-dark .main-menu__right,
        [data-theme="dark"] header.main-header .main-menu__brand-title,
        [data-theme="dark"] header.main-header .main-menu__brand-subtitle,
        [data-theme="dark"] header.main-header .main-menu__main-menu-box ul li a,
        [data-theme="dark"] header.main-header .main-menu__right,
        body.dark-mode header.main-header .main-menu__brand-title,
        body.dark-mode header.main-header .main-menu__brand-subtitle,
        body.dark-mode header.main-header .main-menu__main-menu-box ul li a,
        body.dark-mode header.main-header .main-menu__right {
            color: #f3f4f6 !important;
        }

        header.main-header.navbar-dark .theme-toggle i,
        [data-theme="dark"] header.main-header .theme-toggle i,
        body.dark-mode header.main-header .theme-toggle i {
            color: #f3f4f6 !important;
        }

        /* make sure sticky header clone also receives the style */
        .sticky-header__content header.main-header,
        .sticky-header header.main-header {
            /* styling applied via selectors above when dark */
        }
    </style>

    <!-- Loading State -->
    <div id="loading-container" class="loading-container">
        <div class="spinner"></div>
    </div>

    <!-- Error State -->
    <div id="error-state" class="error-state" style="display: none;">
        <div class="error-icon">⚠️</div>
        <h2 class="error-title">Artikel Tidak Ditemukan</h2>
        <p class="error-text">Maaf, artikel yang Anda cari tidak dapat ditemukan.</p>
        <a href="{{ route('artikel') }}" class="btn-back-to-list">
            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                    d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
            </svg>
            Kembali ke Daftar Artikel
        </a>
    </div>

    <!-- Article Content -->
    <div id="article-content" style="display: none;">
        <!-- Article Hero -->
        <section class="article-hero">
            <div class="article-hero-content">
                <a href="{{ route('artikel') }}" class="back-button">
                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
                    </svg>
                    Kembali ke Daftar Artikel
                </a>

                <div class="article-hero-meta">
                    <span class="article-hero-category" id="hero-category"></span>
                    <span class="article-hero-badge" id="hero-badge" style="display: none;"></span>
                    <div class="article-hero-date" id="hero-date">
                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path
                                d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
                        </svg>
                        <span id="hero-date-text"></span>
                    </div>
                </div>

                <h1 class="article-hero-title" id="hero-title"></h1>
            </div>
        </section>

        <!-- Article Content Section -->
        <section class="article-content-section">
            <div class="article-content-container">
                <!-- Main Content -->
                <div class="article-main-content">
                    <img id="featured-image" class="article-featured-image" src="" alt=""
                        style="display: none;">

                    <div class="article-body">
                        <div class="article-text" id="article-body-text"></div>

                        <div class="article-divider"></div>

                        <div class="article-footer">
                            <p class="article-footer-text">Terima kasih telah membaca artikel ini</p>
                            <a href="{{ route('artikel') }}" class="btn-back-to-list">
                                <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                        d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
                                </svg>
                                Kembali ke Daftar Artikel
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <aside class="article-sidebar">
                    <!-- Related Articles -->
                    <div class="sidebar-section">
                        <h3 class="sidebar-title">
                            <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                                <path
                                    d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
                            </svg>
                            Artikel Lainnya
                        </h3>
                        <div id="related-articles">
                            <!-- Related articles will be inserted here -->
                        </div>
                    </div>
                </aside>
            </div>
        </section>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            const BASE_URL = "{{ env('BASE_URL') }}";
            const DAERAH = "{{ env('DAERAH') }}";
            const articleId = parseInt("{{ $id }}");

            console.log('Loading article ID:', articleId);

            // Fetch articles data
            $.ajax({
                url: `${BASE_URL}/api/public/sites/${DAERAH}`,
                method: 'GET',
                success: function(response) {
                    console.log('API Response:', response);

                    // Combine local and inherited articles
                    const localArticles = response.local?.articles || [];
                    const inheritedArticles = response.inherited?.articles || [];
                    const allArticles = [...localArticles, ...inheritedArticles];

                    // Find the article
                    const article = allArticles.find(a => a.id === articleId);

                    if (article) {
                        displayArticle(article);
                        // Display related articles
                        displayRelatedArticles(articleId, allArticles);
                    } else {
                        showError();
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching data:', error);
                    showError();
                }
            });
        });

        function displayArticle(article) {
            const BASE_URL = "{{ env('BASE_URL') }}";

            // Hide loading, show content
            $('#loading-container').hide();
            $('#article-content').show();

            // Set category
            $('#hero-category').text(article.category?.name || 'Umum');

            // Set badge if inherited
            if (article.is_inherited) {
                $('#hero-badge').text('KRS Jawa-III').show();
            }

            // Set date
            const date = new Date(article.createdAt).toLocaleDateString('id-ID', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });
            $('#hero-date-text').text(date);

            // Set title
            const title = article.title || 'Tanpa Judul';
            $('#hero-title').text(title);
            document.title = `${title} || KLINIK PKP JAWA 3`;

            // Set featured image
            if (article.path_image) {
                const imageUrl = article.path_image.startsWith('http') ?
                    article.path_image :
                    `${BASE_URL}/${article.path_image}`;
                $('#featured-image').attr('src', imageUrl).attr('alt', title).show();
            }

            // Set body content
            $('#article-body-text').text(article.body || 'Tidak ada konten');
        }

        function displayRelatedArticles(currentArticleId, allArticles) {
            const BASE_URL = "{{ env('BASE_URL') }}";
            const relatedContainer = $('#related-articles');
            relatedContainer.empty();

            // Filter out current article and get random 5 articles
            const otherArticles = allArticles.filter(a => a.id !== currentArticleId);
            const relatedArticles = otherArticles.sort(() => 0.5 - Math.random()).slice(0, 5);

            if (relatedArticles.length === 0) {
                relatedContainer.html('<div class="sidebar-empty">Tidak ada artikel lain</div>');
                return;
            }

            relatedArticles.forEach(article => {
                const imageUrl = article.path_image ?
                    (article.path_image.startsWith('http') ? article.path_image :
                        `${BASE_URL}/${article.path_image}`) :
                    '';

                const categoryName = article.category?.name || 'Umum';
                const title = article.title || 'Tanpa Judul';
                const date = new Date(article.createdAt).toLocaleDateString('id-ID', {
                    day: 'numeric',
                    month: 'short',
                    year: 'numeric'
                });

                const articleHtml = `
                    <a href="/artikel/${article.id}" class="related-article-item">
                        ${imageUrl ? `
                                    <img src="${imageUrl}" alt="${title}" class="related-article-image">
                                ` : `
                                    <div class="related-article-image"></div>
                                `}
                        <div class="related-article-content">
                            <span class="related-article-category">${categoryName}</span>
                            <h4 class="related-article-title">${title}</h4>
                            <div class="related-article-date">
                                <svg width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                                </svg>
                                ${date}
                            </div>
                        </div>
                    </a>
                `;

                relatedContainer.append(articleHtml);
            });
        }

        function showError() {
            $('#loading-container').hide();
            $('#error-state').show();
        }
    </script>
    
    <x-footer_one />
@endsection