@extends('layouts.app')

@section('content')
@php
    use Illuminate\Support\Str;
    $locale = app()->getLocale();
    $dir = $locale === 'ar' ? 'rtl' : 'ltr';
    
    // Préparer les données pour le partage
    $shareUrl = url()->current();
    $shareTitle = function_exists('trans_field') ? trans_field($news, 'title') : ($news->title ?? ($news->titre_G ?? 'Actualité'));
    $shareDescription = Str::limit(strip_tags(function_exists('trans_field') ? trans_field($news, 'content') : ($news->content ?? '')), 160);
    $shareImage = $imageSrc ?? asset('assets/img/logo/logo2.png');
@endphp

<meta property="og:title" content="{{ $shareTitle }}">
<meta property="og:description" content="{{ $shareDescription }}">
<meta property="og:url" content="{{ $shareUrl }}">
<meta property="og:type" content="article">
<meta property="og:image" content="{{ $shareImage }}">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ $shareTitle }}">
<meta name="twitter:description" content="{{ $shareDescription }}">
<meta name="twitter:image" content="{{ $shareImage }}">

<div class="container my-5" dir="{{ $dir }}" lang="{{ $locale }}">
    <div class="news-card">

        {{-- En-tête --}}
        <div class="news-header">
            <div class="news-date">
                <i class="la la-calendar"></i>
                {{ \Carbon\Carbon::parse($news->date)->format('d/m/Y') }}
            </div>
<br/>
            {{-- title: try trans_field (titre_fr/titre_ar), fallback to plain title --}}
            <h2 class="news-title">
                {{ $shareTitle }}
            </h2>

            <div style="width:80px;"></div> {{-- pour équilibrer le centrage --}}
        </div>

        {{-- Contenu principal --}}
        <div class="news-body">

            {{-- Image ou vidéo --}}
         <div class="news-media">
    @if(!empty($imageSrc))
        <img
            src="{{ $imageSrc }}"
            alt="{{ $shareTitle }}">
    @elseif(!empty($news->youtube_url))
        @php
            preg_match('/(youtu\.be\/|v=)([A-Za-z0-9_\-]+)/', $news->youtube_url, $matches);
            $youtubeId = $matches[2] ?? null;
        @endphp
        @if($youtubeId)
            <div class="ratio ratio-16x9">
                <iframe
                    src="https://www.youtube.com/embed/{{ $youtubeId }}"
                    title="{{ __('site.youtube_video') }}"
                    allowfullscreen>
                </iframe>
            </div>
        @endif
    @endif
</div>


            {{-- Texte du contenu --}}
            <div class="news-content">
                {{-- content: prefer localized content field if available --}}
                @if(function_exists('trans_field'))
                    {!! trans_field($news, 'content') ?? $news->content !!}
                @else
                    {!! $news->content !!}
                @endif
            </div>
        </div>

        {{-- Section de partage social --}}
        <div class="social-share-section">
            <h4 class="social-share-title">
                <i class="la la-share-alt"></i>
                {{ __('site.partager_sur') ?? 'Partager sur' }}
            </h4>
            <div class="social-share-buttons">
                {{-- Facebook --}}
                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($shareUrl) }}" 
                   target="_blank" 
                   class="social-btn facebook"
                   title="{{ __('site.partager_facebook') ?? 'Partager sur Facebook' }}">
                    <i class="fab fa-facebook-f"></i>
                    <span>Facebook</span>
                </a>

                {{-- Twitter / X --}}
                <a href="https://twitter.com/intent/tweet?text={{ urlencode($shareTitle) }}&url={{ urlencode($shareUrl) }}" 
                   target="_blank" 
                   class="social-btn twitter"
                   title="{{ __('site.partager_twitter') ?? 'Partager sur X' }}">
                    <i class="fab fa-x-twitter"></i>
                    <span>X</span>
                </a>

                {{-- LinkedIn --}}
                <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode($shareUrl) }}" 
                   target="_blank" 
                   class="social-btn linkedin"
                   title="{{ __('site.partager_linkedin') ?? 'Partager sur LinkedIn' }}">
                    <i class="fab fa-linkedin-in"></i>
                    <span>LinkedIn</span>
                </a>

                {{-- WhatsApp --}}
                <a href="https://wa.me/?text={{ urlencode($shareTitle . ' ' . $shareUrl) }}" 
                   target="_blank" 
                   class="social-btn whatsapp"
                   title="{{ __('site.partager_whatsapp') ?? 'Partager sur WhatsApp' }}">
                    <i class="fab fa-whatsapp"></i>
                    <span>WhatsApp</span>
                </a>

                {{-- Telegram --}}
                <a href="https://t.me/share/url?url={{ urlencode($shareUrl) }}&text={{ urlencode($shareTitle) }}" 
                   target="_blank" 
                   class="social-btn telegram"
                   title="{{ __('site.partager_telegram') ?? 'Partager sur Telegram' }}">
                    <i class="fab fa-telegram-plane"></i>
                    <span>Telegram</span>
                </a>

                {{-- Copier le lien --}}
                <button class="social-btn copy-link" onclick="showNotificationPopup('{{ $shareUrl }}')" title="{{ __('site.copier_lien') ?? 'Copier le lien' }}">
                    <i class="fas fa-link"></i>
                    <span>{{ __('site.copier_lien') ?? 'Copier le lien' }}</span>
                </button>
            </div>
        </div>

        {{-- Bouton retour --}}
        <div class="it-blog-btn" style="text-align: center;">
            <a href="{{ route('news.index') }}" class="it-btn-orange">
                <span>
                    <span class="text-1">{{ __('site.news_back_to_list') }}</span>
                    <span class="text-2">{{ __('site.news_back_to_list') }}</span>
                </span>
                <i>
                    <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z"
                            fill="white" />
                    </svg>
                    <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z"
                            fill="white" />
                    </svg>
                </i>
            </a>
        </div>

    </div>
</div>

{{-- Popup de notification personnalisée --}}
<div id="notificationPopup" class="notification-popup">
    <div class="notification-popup-content">
        <div class="notification-icon">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="notification-message">
            {{ __('site.lien_copie') ?? 'Lien copié avec succès !' }}
        </div>
        <button class="notification-close" onclick="closeNotificationPopup()">
            <i class="fas fa-times"></i>
        </button>
    </div>
</div>

<style>
    .news-card {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        padding: 30px;
    }

    .news-card:hover {
        transform: translateY(-3px);
    }

    .news-header {
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }

    .news-title {
        font-weight: 700;
        font-size: 1.8rem;
        color: #222;
        text-align: center;
        flex: 1;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .news-date {
        color: #888;
        font-size: 0.95rem;
    }

    .news-media {
        flex: 1;
        max-width: 48%;
    }

    .news-media img,
    .news-media iframe {
        width: 100%;
        border-radius: 15px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    }

    .news-content {
        flex: 1;
        max-width: 48%;
        line-height: 1.9;
        font-size: 1.1rem;
        color: #333;
        text-align: justify;
    }

    .news-body {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px;
        margin-bottom: 40px;
    }

    /* Styles pour la section de partage social - Version compacte */
    .social-share-section {
        margin: 40px 0 30px;
        padding: 25px 0;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
    }

    .social-share-title {
        text-align: center;
        margin-bottom: 20px;
        font-size: 1.3rem;
        color: #333;
        font-weight: 600;
    }

    .social-share-title i {
        margin-right: 10px;
        color: var(--it-theme-1, #E74C3C);
    }

    .social-share-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .social-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 30px;
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
        transition: all 0.3s ease;
        color: #fff;
        border: none;
        cursor: pointer;
    }

    .social-btn i {
        font-size: 13px;
    }

    .social-btn span {
        font-size: 11px;
    }

    .social-btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.1);
        color: #fff;
        text-decoration: none;
    }

    /* Couleurs des réseaux sociaux */
    .facebook {
        background: #1877f2;
    }
    .twitter {
        background: #000000;
    }
    .linkedin {
        background: #0077b5;
    }
    .whatsapp {
        background: #25d366;
    }
    .telegram {
        background: #229ed9;
    }
    .copy-link {
        background: #28a745;
    }

    /* Style de la popup de notification */
    .notification-popup {
        display: none;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        animation: slideInRight 0.3s ease-out;
    }

    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideOutRight {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }

    .notification-popup.show {
        display: block;
    }

    .notification-popup.hide {
        animation: slideOutRight 0.3s ease-out forwards;
    }

    .notification-popup-content {
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px 20px;
        min-width: 300px;
        border-right: 4px solid #28a745;
    }

    .notification-icon {
        background: #28a745;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .notification-icon i {
        color: white;
        font-size: 20px;
    }

    .notification-message {
        flex: 1;
        color: #333;
        font-size: 14px;
        font-weight: 500;
    }

    .notification-close {
        background: none;
        border: none;
        cursor: pointer;
        color: #999;
        font-size: 16px;
        padding: 5px;
        transition: color 0.2s;
    }

    .notification-close:hover {
        color: #333;
    }

    /* Responsive : sur mobile, masquer le texte pour plus de compacité */
    @media(max-width: 768px) {
        .news-body {
            flex-direction: column;
        }
        .news-media, .news-content {
            max-width: 100%;
        }
        .news-title {
            font-size: 1.4rem;
        }
        .social-share-buttons {
            gap: 6px;
        }
        .social-btn {
            padding: 6px 10px;
        }
        .social-btn span {
            display: none;
        }
        .social-btn i {
            font-size: 14px;
            margin: 0;
        }
        .notification-popup-content {
            min-width: 250px;
            padding: 12px 15px;
        }
        .notification-icon {
            width: 30px;
            height: 30px;
        }
        .notification-icon i {
            font-size: 14px;
        }
        .notification-message {
            font-size: 12px;
        }
    }

    /* Bouton retour orange */
    .it-btn-orange {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: #E74C3C;
        color: #fff;
        padding: 12px 30px;
        border-radius: 50px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        overflow: hidden;
        position: relative;
    }

    .it-btn-orange:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        color: #fff;
        background: #c0392b;
        text-decoration: none;
    }

    .it-btn-orange span {
        display: inline-block;
        position: relative;
        overflow: hidden;
    }

    .it-btn-orange .text-1 {
        display: inline-block;
        transition: transform 0.3s ease;
    }

    .it-btn-orange .text-2 {
        display: inline-block;
        position: absolute;
        top: 100%;
        left: 0;
        transition: transform 0.3s ease;
    }

    .it-btn-orange:hover .text-1 {
        transform: translateY(-100%);
    }

    .it-btn-orange:hover .text-2 {
        transform: translateY(-100%);
    }

    .it-btn-orange i {
        display: inline-flex;
        transition: transform 0.3s ease;
    }

    .it-btn-orange:hover i {
        transform: translateX(5px);
    }

    .it-btn-orange i svg:first-child {
        display: inline-block;
    }

    .it-btn-orange i svg:last-child {
        display: none;
    }

    .it-btn-orange:hover i svg:first-child {
        display: none;
    }

    .it-btn-orange:hover i svg:last-child {
        display: inline-block;
    }

    /* Support RTL */
    [dir="rtl"] .it-btn-orange i svg {
        transform: rotate(180deg);
    }

    [dir="rtl"] .it-btn-orange:hover i {
        transform: translateX(-5px) rotate(180deg);
    }

    [dir="rtl"] .news-content {
        text-align: right;
    }

    [dir="rtl"] .news-header {
        direction: rtl;
    }

    [dir="rtl"] .social-share-title i {
        margin-right: 0;
        margin-left: 10px;
    }

    [dir="rtl"] .social-btn i {
        transform: scaleX(-1);
    }

    [dir="rtl"] .notification-popup {
        right: auto;
        left: 20px;
    }

    [dir="rtl"] .notification-popup-content {
        border-right: none;
        border-left: 4px solid #28a745;
    }
</style>

<script>
    let notificationTimeout;

    // Fonction pour afficher la popup de notification
    function showNotificationPopup(text) {
        // Copier le lien
        navigator.clipboard.writeText(text).then(function() {
            const popup = document.getElementById('notificationPopup');
            
            // Enlever les classes existantes
            popup.classList.remove('hide', 'show');
            
            // Forcer le reflow
            void popup.offsetWidth;
            
            // Afficher la popup
            popup.classList.add('show');
            
            // Effacer le timeout précédent s'il existe
            if (notificationTimeout) {
                clearTimeout(notificationTimeout);
            }
            
            // Masquer automatiquement après 3 secondes
            notificationTimeout = setTimeout(function() {
                closeNotificationPopup();
            }, 3000);
        }).catch(function(err) {
            console.error('Erreur lors de la copie: ', err);
            // Fallback pour les navigateurs plus anciens
            const textarea = document.createElement('textarea');
            textarea.value = text;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            
            const popup = document.getElementById('notificationPopup');
            popup.classList.remove('hide', 'show');
            void popup.offsetWidth;
            popup.classList.add('show');
            
            if (notificationTimeout) {
                clearTimeout(notificationTimeout);
            }
            
            notificationTimeout = setTimeout(function() {
                closeNotificationPopup();
            }, 3000);
        });
    }

    // Fonction pour fermer la popup
    function closeNotificationPopup() {
        const popup = document.getElementById('notificationPopup');
        popup.classList.add('hide');
        
        // Retirer complètement la classe show après l'animation
        setTimeout(function() {
            popup.classList.remove('show', 'hide');
        }, 300);
    }
</script>

@endsection