@section('title', 'News Details : ' . $dataNews['newsDetails']->news_title)

@section('meta-tags')
    <meta property="og:title" content="{{ $dataNews['newsDetails']->news_title }}" />
    <meta property="og:description" content="{{ Str::limit(strip_tags($dataNews['newsDetails']->news_lead), 150) }}" />
    <meta property="og:image" content="{{ $dataNews['newsDetails']->media_path }}" />
    <meta property="og:url" content="{{ route('newsDetail', $dataNews['newsDetails']->news_slug) }}" />
    <meta property="og:type" content="article" />

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $dataNews['newsDetails']->news_title }}">
    <meta name="twitter:description" content="{{ Str::limit(strip_tags($dataNews['newsDetails']->news_lead), 150) }}">
    <meta name="twitter:image" content="{{ $dataNews['newsDetails']->media_path }}">
@endsection


<style>
    :root {
        --primary-color: #0056b3;
        --secondary-color: #6c757d;
        --text-dark: #212529;
        --text-light: #6c757d;
        --bg-light: #f8f9fa;
        --card-bg: #ffffff;
        --border-radius: 12px;
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
        --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
        --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
        --transition: all 0.3s ease;
        --border-color: rgba(0,0,0,0.03);
        --primaryFont: "Gilroy-Bold", sans-serif !important;
    }

    .theme-dark {
        --text-dark: #e9ecef;
        --text-light: #adb5bd;
        --bg-light: #1a1d21;
        --card-bg: #212529;
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
        --shadow-md: 0 4px 20px rgba(0,0,0,0.3);
        --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
        --border-color: rgba(255,255,255,0.05);
        --primaryFont: "Gilroy-Bold", sans-serif !important;
        --secondaryFont: "Gilroy-Regular", sans-serif !important;
    }

    .single-para p, .single-para span {
        font-size: 18px !important;
        line-height: 1.8 !important;
        text-align: justify !important;
        color: var(--text-dark);
        margin-bottom: 1.5rem;
    }

    .news-details-card {
        background: var(--card-bg);
        border-radius: var(--border-radius);
        padding: 2.5rem;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-color);
        margin-bottom: 3rem;
    }

    .news-details-card p {
        font-size: 18px !important;
        line-height: 1.8 !important;
        text-align: justify !important;
        color: var(--text-dark)!important;
        font-family: var(--secondaryFont) !important;
    }

    /* Hyperlinks in article body */
    .single-para a {
        color: #0056b3 !important;
        text-decoration: underline !important;
        font-weight: 600;
        transition: color 0.2s;
    }
    .single-para a:hover {
        color: #003d80 !important;
    }

    /* Image Captions */
    figcaption {
        font-size: 0.9rem;
        color: #6c757d;
        text-align: center;
        margin-top: 8px;
        font-style: italic;
        background: #f8f9fa;
        padding: 5px 10px;
        border-radius: 4px;
        border-left: 3px solid #0056b3;
    }
    
    .single-para figure {
        margin-bottom: 1.5rem;
        text-align: center;
    }

    /* Lightbox Styles */
    .lightbox-modal {
        display: none;
        position: fixed;
        z-index: 9999;
        padding-top: 50px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.9);
    }
    
    .lightbox-content {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 1000px;
        max-height: 85vh;
        object-fit: contain;
        animation-name: zoom;
        animation-duration: 0.3s;
    }
    
    @keyframes zoom {
        from {transform:scale(0)}
        to {transform:scale(1)}
    }
    
    .lightbox-close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
        cursor: pointer;
    }
    
    .lightbox-close:hover,
    .lightbox-close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }
    
    .lightbox-caption {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
        text-align: center;
        color: #ccc;
        padding: 10px 0;
        height: 150px;
    }
    
    /* Make images clickable */
    .single-para img, .news-details-card img.round-6 {
        cursor: zoom-in;
        transition: 0.3s;
    }
    .single-para img:hover, .news-details-card img.round-6:hover {
        opacity: 0.9;
    }

    .article-title {
        font-size: 2.5rem;
        font-weight: 800;
        font-family: var(--primaryFont) !important;
        line-height: 1.2;
        text-align: justify !important;
        color: var(--text-dark);
        margin-bottom: 1.5rem;
    }

    .article-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-items: center;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-light);
        font-size: 0.9rem;
    }

    .author-pill {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--bg-light);
        padding: 5px 15px 5px 5px;
        border-radius: 50px;
        color: var(--text-dark);
        font-weight: 600;
        text-decoration: none;
    }

    /* Share Section */
    .share-box {
        background: var(--bg-light);
        padding: 1.5rem;
        border-radius: var(--border-radius);
        margin-top: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .share-buttons {
        display: flex;
        gap: 10px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .share-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: white;
        text-decoration: none;
        transition: transform 0.2s;
        font-size: 1.2rem;
    }
    .share-btn:hover {
        transform: scale(1.1);
        color: white;
    }
    .share-btn.fb { background: #1877f2; }
    .share-btn.tw { background: #000000; }
    .share-btn.wa { background: #25d366; }
    .share-btn.tg { background: #0088cc; }

    /* Related Articles Grid */
    .related-title {
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        position: relative;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .related-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background: var(--primary-color);
    }

    /* Card Component Styles (Reused) */
    .modern-card {
        background: var(--card-bg);
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border-color);
        transition: var(--transition);
    }
    .modern-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
    }
    .card-img-wrap {
        position: relative;
        overflow: hidden;
        padding-top: 60%;
    }
    .card-img-wrap img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .modern-card:hover .card-img-wrap img {
        transform: scale(1.05);
    }
    .card-content {
        padding: 1.25rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    .card-title {
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.4;
        margin-bottom: 0.75rem;
    }
    .card-title a {
        color: var(--text-dark);
        text-decoration: none;
    }
    .card-meta {
        font-size: 0.85rem;
        color: var(--text-light);
        margin-top: auto;
    }

    /* Sidebar Widgets */
    .sidebar-header-orange {
        background-color: #f36f21;
        color: white;
        padding: 10px 15px;
        font-weight: 800;
        text-transform: uppercase;
        text-align: center;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        margin-bottom: 0;
        font-size: 1.1rem;
    }
    .sidebar-content-orange {
        border: 1px solid var(--border-color);
        border-top: none;
        padding: 15px;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        background: var(--card-bg);
        margin-bottom: 2rem;
    }
    .sidebar-widget {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: var(--border-radius);
        margin-bottom: 2rem;
        border: 1px solid var(--border-color);
    }
    .sidebar-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color);
    }
    .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .tag-list li a:hover {
        background: var(--primary-color);
        color: white;
    }

    .social-list {
        display: flex;
        gap: 12px;
        justify-content: center;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .social-link {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--bg-light);
        color: var(--text-dark);
        text-decoration: none;
        transition: all 0.3s ease;
        border: 1px solid var(--border-color);
        font-size: 1.2rem;
    }
    .social-link:hover {
        transform: translateY(-3px);
        color: white;
        box-shadow: var(--shadow-md);
    }
    .social-link.facebook:hover { background: #1877f2; border-color: #1877f2; }
    .social-link.twitter:hover { background: #000000; border-color: #000000; }
    .social-link.instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: transparent; }
    .social-link.youtube:hover { background: #ff0000; border-color: #ff0000; }
    .social-link.tiktok:hover { background: #000000; border-color: #000000; }
</style>

<div class="container mt-60 mb-60">
    <div class="row gx-5">
        <!-- Main Content -->
        <div class="col-xl-8">
            <article class="news-details-card">
                <div class="article-meta">
                    <a href="javascript:void(0);" class="author-pill">
                        <img src="{{asset('assets/news-image/user-icon.png')}}" width="30" height="30" alt="Author">
                        {{$dataNews['newsDetails']->news_author}}
                    </a>
                    <span><i class="ri-calendar-line me-1"></i> {{ \Carbon\Carbon::parse($dataNews['newsDetails']->created_at)->locale('fr')->translatedFormat('d M Y') }}</span>
                    @if (!empty($dataNews['newsDetails']->rubriqueCategory['rubrique_categorie_name']))
                        <a href="{{ route('category', [$dataNews['newsDetails']->rubriqueCategory['rubrique_categorie_name'], $dataNews['newsDetails']->rubriqueCategory['slug']]) }}" class="text-primary fw-bold text-decoration-none">
                            #{{$dataNews['newsDetails']->rubriqueCategory['rubrique_categorie_name']}}
                        </a>
                    @endif
                    @if (!empty($dataNews['newsDetails']->rubrique['rubrique_name']))
                        <a href="{{ route('rubrique', [$dataNews['newsDetails']->rubrique['rubrique_name'], $dataNews['newsDetails']->rubrique['slug']]) }}" class="text-primary fw-bold text-decoration-none">
                            #{{$dataNews['newsDetails']->rubrique['rubrique_name']}}
                        </a>
                    @endif
                </div>

                <h1 class="article-title">{{$dataNews['newsDetails']->news_title}}</h1>
                <div class="mb-4">
                    <img src="{{$dataNews['newsDetails']->media_path}}" 
                         alt="{{$dataNews['newsDetails']->news_title}}" 
                         class="w-100 round-6 shadow-sm clickable-image"
                         onclick="openLightbox(this)">
                    @if(!empty($dataNews['newsDetails']->credit) || !empty($dataNews['newsDetails']->news_title)) 
                        <figcaption>
                            {{ !empty($dataNews['newsDetails']->credit) ? $dataNews['newsDetails']->credit : $dataNews['newsDetails']->news_title }}
                        </figcaption>
                    @endif
                </div>
                <p class="lead mb-4 text-dark" style="font-size: 1.25rem; line-height: 1.6; text-align: justify !important; font-family: var(--primaryFont) !important; font-weight: 800 !important;">
                    {{$dataNews['newsDetails']->news_lead}}
                </p>


                <div class="single-para mt-4">
                    {!! $dataNews['newsDetails']->news_content !!}
                </div>

                <!-- Share Box -->
                @php
                    $articleUrl = route('newsDetail', $dataNews['newsDetails']->news_slug);
                    $articleTitle = $dataNews['newsDetails']->news_title;
                @endphp
                <div class="share-box">
                    <span class="fw-bold text-uppercase small">Partager l'article :</span>
                    <div class="share-buttons">
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($articleUrl) }}" target="_blank" class="share-btn fb"><i class="ri-facebook-fill"></i></a>
                        <a href="https://twitter.com/intent/tweet?text={{ urlencode($articleTitle) }}&url={{ urlencode($articleUrl) }}" target="_blank" class="share-btn tw"><i class="ri-twitter-x-line"></i></a>
                        <a href="https://wa.me/?text={{ urlencode($articleTitle . ' ' . $articleUrl) }}" target="_blank" class="share-btn wa"><i class="ri-whatsapp-line"></i></a>
                        <a href="https://t.me/share/url?url={{ urlencode($articleUrl) }}&text={{ urlencode($articleTitle) }}" target="_blank" class="share-btn tg"><i class="ri-telegram-line"></i></a>
                    </div>
                </div>
            </article>

            <!-- Related Articles Section -->
            <div class="related-articles-section mt-5">
                <h3 class="related-title">Articles Similaires</h3>
                <div class="row">
                    @foreach ($dataNews['similarNews']->take(3) as $similar)
                        <div class="col-md-4 mb-4">
                            <div class="modern-card">
                                <div class="card-img-wrap">
                                    <a href="{{ route('newsDetail', $similar->news_slug) }}">
                                        <img src="{{ $similar->media_path }}" alt="{{ $similar->news_title }}">
                                    </a>
                                </div>
                                <div class="card-content">
                                    <h4 class="card-title">
                                        <a href="{{ route('newsDetail', $similar->news_slug) }}">{{ Str::limit($similar->news_title, 60) }}</a>
                                    </h4>
                                    <div class="card-meta">
                                        <i class="ri-time-line me-1"></i> {{ \Carbon\Carbon::parse($similar->created_at)->locale('fr')->translatedFormat('d M Y') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-xl-4">
            <div class="sidebar">
                <!-- PRESENTATION WIDGET -->
                <div class="sidebar-header-orange">
                    PRÉSENTATION EBURNIE TODAY
                </div>
                <div class="sidebar-content-orange">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/lNy-eM4q7AM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="fitvid0"></iframe>
                    </div>
                </div>

                <!-- ARCHIVES WIDGET -->
                <div class="sidebar-header-orange">
                    ARCHIVES
                </div>
                <div class="sidebar-content-orange">
                    <select class="form-select" aria-label="Archives" onchange="if (this.value) window.location.href=this.value">
                        <option selected disabled>Sélectionner un mois</option>
                        @if(isset($archivesLinks))
                            @foreach($archivesLinks as $archive)
                                <option value="{{ route('archives', ['year' => $archive->year, 'month' => $archive->month]) }}">
                                    {{ $archive->month_name }} {{ $archive->year }} ({{ $archive->count }})
                                </option>
                            @endforeach
                        @endif
                    </select>
                </div>

                <!-- RUBRIQUES WIDGET -->
                <div class="sidebar-widget">
                    <h4 class="sidebar-title">Rubriques</h4>
                    <ul class="tag-list list-unstyle">
                        @foreach ($rubriqueNews as $rubrique)
                            <li>
                                <a href="{{ route('rubrique', [$rubrique['rubrique_name'], $rubrique['slug']]) }}">
                                    {{ $rubrique['rubrique_name'] }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <!-- SOCIAL WIDGET -->
                <div class="sidebar-widget text-center">
                    <h4 class="sidebar-title">Suivez-nous</h4>
                    <ul class="social-list">
                        <li><a href="https://www.facebook.com/EburnieToday" target="_blank" class="social-link facebook"><i class="ri-facebook-fill"></i></a></li>
                        <li><a href="https://twitter.com/EburnieToday" target="_blank" class="social-link twitter"><i class="ri-twitter-x-line"></i></a></li>
                        <li><a href="https://www.instagram.com/eburnietoday" target="_blank" class="social-link instagram"><i class="ri-instagram-line"></i></a></li>
                        <li><a href="https://www.youtube.com/@EburnieToday" target="_blank" class="social-link youtube"><i class="ri-youtube-fill"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Lightbox Modal -->
<div id="imageLightbox" class="lightbox-modal">
    <span class="lightbox-close" onclick="closeLightbox()">&times;</span>
    <img class="lightbox-content" id="lightboxImage">
    <div id="lightboxCaption" class="lightbox-caption"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. Wrap images in figure/figcaption within article body
        const articleBody = document.querySelector('.single-para');
        if (articleBody) {
            const images = articleBody.querySelectorAll('img');
            images.forEach(img => {
                // Skip if already wrapped in figure
                if (img.parentElement.tagName === 'FIGURE') return;

                const figure = document.createElement('figure');
                const captionText = img.getAttribute('alt') || ''; // Use alt as caption

                // Insert figure before img
                img.parentNode.insertBefore(figure, img);
                // Move img into figure
                figure.appendChild(img);

                // Add caption if alt text exists
                if (captionText) {
                    const figcaption = document.createElement('figcaption');
                    figcaption.textContent = captionText;
                    figure.appendChild(figcaption);
                }
                
                // Make image clickable for lightbox
                img.classList.add('clickable-image');
                img.onclick = function() { openLightbox(this); };
            });
        }
    });

    // Lightbox functions
    function openLightbox(imgElement) {
        const modal = document.getElementById("imageLightbox");
        const modalImg = document.getElementById("lightboxImage");
        const captionText = document.getElementById("lightboxCaption");
        
        modal.style.display = "block";
        modalImg.src = imgElement.src;
        // Try to find caption text from figcaption or alt
        let caption = imgElement.alt;
        // check if sibling is figcaption
        if (imgElement.nextElementSibling && imgElement.nextElementSibling.tagName === 'FIGCAPTION') {
            caption = imgElement.nextElementSibling.textContent;
        }
        captionText.innerHTML = caption;
    }

    function closeLightbox() {
        document.getElementById("imageLightbox").style.display = "none";
    }
    
    // Close on click outside image
    document.getElementById("imageLightbox").addEventListener('click', function(e) {
         if (e.target === this) {
            closeLightbox();
        }
    });
    
    // Close on Escape key
    document.addEventListener('keydown', function(evt) {
        if (evt.key === "Escape") {
            closeLightbox();
        }
    });
</script>