@extends('layouts.app')

@section('content')
@php
    use Illuminate\Support\Str;

    $shareUrl = url()->current();
    $shareTitle = trim(trans_field($builder, 'titre') ?? $builder->titre_ar ?? 'Builder');

    $firstTextContent = $builder->contenus->firstWhere('nature', 'texte');
    $shareDescription = Str::limit(
        trim(strip_tags(trans_field($firstTextContent, 'text') ?? $firstTextContent?->text_ar ?? '')),
        160
    );
    $firstImageContent = $builder->contenus->firstWhere('nature', 'image');
    $shareImage = asset('assets/img/logo/logo2.png');

    if ($firstImageContent && !empty($firstImageContent->image)) {
        $shareImage = asset('assets/img/logo/logo2.png');
    }
    $shareMessage = trim($shareTitle . ' — ' . $shareDescription);
@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 }}">

<section class="it-about-3-area p-relative pt-30 pb-125">
    <img class="it-about-shape-1" src="{{ asset('assets/img/shape/about-1-1.png') }}" alt="">
    <div class="container">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-4">
                    <span class="it-section-subtitle">{{ trans_field($builder, 'titre') ?? $builder->titre_ar }}</span>
                </div>
            </div>

            <div class="it-about-2-area p-relative pt-0 pb-45">
                <div class="it-project-3-area pt-65 pb-45" style="background:white;">
                    <div class="container">
                        <div class="row mb-50">
                            @foreach($builder->contenus as $contenu)
                                @php
                                    if ($contenu->nature == 'video') {
                                        preg_match("/v=([a-zA-Z0-9_-]+)/", $contenu->url_video, $matches);
                                        $videoId = $matches[1] ?? '';
                                        $videoEmbed = $videoId ? "https://www.youtube.com/embed/$videoId" : '';
                                    }
                                @endphp

                                <div class="{{ $contenu->col }} mb-30">
                                    @if($contenu->nature == 'image' && $contenu->image)
                                        <div style="animation: none !important; transition: none !important;">
                                            <img src="data:image/*;base64,{{ base64_encode($contenu->image) }}" 
                                                 alt="" 
                                                 style="width:100%; height:auto; animation: none !important; transition: none !important;">
                                        </div>
                                    @elseif($contenu->nature == 'texte')
                                          <div class="it-about-2-text">
        {!! $contenu->rendered_text ?? trans_field($contenu, 'text') ?? $contenu->text_ar !!}
    </div>
                                    @elseif($contenu->nature == 'video' && $videoEmbed)
                                        <div class="it-about-2-text">
                                            <iframe width="100%" height="315" src="{{ $videoEmbed }}" frameborder="0" allowfullscreen></iframe>
                                        </div>
                                    @elseif($contenu->nature == 'file')
                                        <div class="it-about-2-text">
                                            @php
                                                $fileUrl = $contenu->public_url ?? (
                                                    filled($contenu->file_path)
                                                        ? url('/shared_uploads/' . rawurlencode(basename($contenu->file_path)))
                                                        : null
                                                );
                                                $fileName = $contenu->file_name ?? basename($contenu->file_path ?? 'file');
                                                $fileSize = $contenu->file_size ?? null;

                                                if (is_numeric($fileSize)) {
                                                    $sizeText = $fileSize >= 1024 ? round($fileSize / 1024, 1) . ' KB' : $fileSize . ' B';
                                                } else {
                                                    $sizeText = null;
                                                }
                                            @endphp

                                            @if($fileUrl && $contenu->file_display === 'iframe' && $contenu->is_embeddable)
                                                <div style="width:100%; height: {{ $contenu->iframe_height_px }}px;">
                                                    <iframe src="{{ $fileUrl }}" style="width:100%; height:100%; border:0; display:block;" frameborder="0" allowfullscreen></iframe>
                                                </div>
                                            @elseif($fileUrl)
                                                <p>
                                                    <a href="{{ $fileUrl }}" target="_blank" rel="noopener">{{ $fileName }}</a>
                                                    @if($sizeText) - <small>{{ $sizeText }}</small> @endif
                                                </p>
                                            @else
                                                <p><em>ملف غير متاح للعرض.</em></p>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>

                        {{-- SHARE BUTTONS (style identique à la page news) --}}
                        <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>

                        @if(isset($builder->id_builder) && $builder->id_builder == 50)
                            <div class="it-blog-btn text-center pb-10">
                                @auth
                                    <a class="it-btn-orange" href="{{ route('investissement_choix') }}">
                                        <span class="text-1">{{ __('site.investissement_choix1') }}</span>
                                        <em></em>
                                    </a>
                                @endauth
                                @guest
                                    <a class="it-btn-orange" href="{{ route('login', ['redirectTo' => route('investissement_choix')]) }}">
                                        <span class="text-1">{{ __('site.investissement_choix1') }}</span>
                                        <em></em>
                                    </a>
                                @endguest
                            </div>
                        @endif

                        @if(isset($builder->id_builder) && $builder->id_builder == 77)
                            <div class="it-blog-btn text-center pb-10">
                                @auth
                                    <a class="it-btn-orange" href="{{ route('doc_fin.index') }}">
                                        <span class="text-1">{{ __('site.financement1') }}</span>
                                        <em></em>
                                    </a>
                                @endauth
                                @guest
                                    <a class="it-btn-orange" href="{{ route('login', ['redirectTo' => route('doc_fin.index')]) }}">
                                        <span class="text-1">{{ __('site.financement1') }}</span>
                                        <em></em>
                                    </a>
                                @endguest
                            </div>
                        @endif

                        @if(isset($builder->id_builder) && $builder->id_builder == 76)
                            <div class="it-blog-btn text-center pb-10">
                                @auth
                                    <a class="it-btn-orange" href="{{ route('manifestation2.index') }}">
                                        <span class="text-1">{{ __('site.manifestation1') }}</span>
                                        <em></em>
                                    </a>
                                @endauth
                                @guest
                                    <a class="it-btn-orange" href="{{ route('login', ['redirectTo' => route('manifestation2.index')]) }}">
                                        <span class="text-1">{{ __('site.manifestation1') }}</span>
                                        <em></em>
                                    </a>
                                @endguest
                            </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Popup de notification (copie du lien) --}}
<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>
    /* ========== STYLES PROPRES AU BUILDER (contenu) ========== */


    /* ========== STYLES DE LA PAGE NEWS (partage et popup) ========== */
    .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 des boutons pour plus de compacité */
    @media(max-width: 768px) {
        .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;
        }
    }

    /* Support 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