@extends('layouts.app')

@section('content')
@php
    use Illuminate\Support\Str;
    $locale = app()->getLocale();
    $dir = $locale === 'ar' ? 'rtl' : 'ltr';
@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="programme-card-detail">

        {{-- En-tête --}}
        <div class="programme-header">
            <div class="programme-date">
                <i class="la la-calendar"></i>
                {{ \Carbon\Carbon::parse($programme->created_at ?? $programme->date ?? now())->format('d/m/Y') }}
            </div>
            <br/>

            {{-- Catégorie --}}
            @if($programme->categorie)
                <div class="programme-category">
                    <span class="category-badge">
                        {{ trans_field($programme->categorie, 'nom') ?? $programme->categorie->nom_ar }}
                    </span>
                </div>
            @endif

            {{-- title --}}
            <h2 class="programme-title">
                {{ $shareTitle }}
            </h2>

            <div style="width:80px;"></div>
        </div>

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

            {{-- Image ou vidéo --}}
            <div class="programme-media">
                @if(!empty($programme->imageSrc))
                    <img src="{{ $programme->imageSrc }}"
                         alt="{{ $shareTitle }}">
                @elseif(!empty($programme->youtube_url))
                    @php
                        preg_match('/(youtu\.be\/|v=)([A-Za-z0-9_\-]+)/', $programme->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
                @else
                    <img src="{{ asset('assets/img/placeholder-programme.jpg') }}"
                         alt="{{ $shareTitle }}">
                @endif
            </div>

            {{-- Texte du contenu --}}
            <div class="programme-content">
                {!! nl2br(e(trans_field($programme, 'desc') ?? $programme->desc_ar ?? $programme->description)) !!}
            </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') }}
            </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') }}">
                    <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') }}">
                    <i class="fab fa-x-twitter"></i>
                    <span>X</span>
                </a>

                {{-- Instagram --}}
                <a href="https://www.instagram.com/" 
                   target="_blank" 
                   class="social-btn instagram"
                   title="{{ __('site.partager_instagram') }}">
                    <i class="fab fa-instagram"></i>
                    <span>Instagram</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') }}">
                    <i class="fab fa-linkedin-in"></i>
                    <span>LinkedIn</span>
                </a>

                {{-- TikTok --}}
                <a href="https://www.tiktok.com/share/video?url={{ urlencode($shareUrl) }}&text={{ urlencode($shareTitle) }}" 
                   target="_blank" 
                   class="social-btn tiktok"
                   title="{{ __('site.partager_tiktok') }}">
                    <i class="fab fa-tiktok"></i>
                    <span>TikTok</span>
                </a>

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

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

        {{-- Bouton retour --}}
        <div class="it-blog-btn" style="text-align: center;">
            <a href="{{ route('programmes.index') }}" class="it-btn-theme">
                <span>
                    <span class="text-1">{{ __('site.programmes.retour_liste') ?? 'العودة إلى القائمة' }}</span>
                    <span class="text-2">{{ __('site.programmes.retour_liste') ?? 'العودة إلى القائمة' }}</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') }}
        </div>
        <button class="notification-close" onclick="closeNotificationPopup()">
            <i class="fas fa-times"></i>
        </button>
    </div>
</div>

<style>
    .programme-card-detail {
        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;
    }

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

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

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

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

    .programme-category {
        text-align: center;
        margin-bottom: 10px;
    }

    .category-badge {
        display: inline-block;
        background: var(--it-theme-1);
        color: #fff;
        padding: 6px 20px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

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

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

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

    .programme-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);
    }

    .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;
    }
    .instagram {
        background: linear-gradient(45deg, #f09433, #d62976, #962fbf);
    }
    .linkedin {
        background: #0077b5;
    }
    .tiktok {
        background: #010101;
    }
    .whatsapp {
        background: #25d366;
    }
    .email {
        background: #6c757d;
    }
    .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 encore plus de compacité */
    @media(max-width: 768px) {
        .programme-body {
            flex-direction: column;
        }
        .programme-media, .programme-content {
            max-width: 100%;
        }
        .programme-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;
        }
    }

    /* Style du bouton avec la couleur theme */
    .it-btn-theme {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: var(--it-theme-1);
        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-theme:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        color: #fff;
        background: var(--it-theme-1);
        filter: brightness(1.05);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    [dir="rtl"] .programme-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