@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)) {
        // If your image is stored as BLOB, social sites cannot read base64/data URIs.
        // Keep a public fallback image unless you already have a public image URL.
        $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">
                                            {!! 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 with translation & RTL support --}}
                        <div class="share-section">
                            <div class="share-divider">
                                <span>{{ __('site.share_article') ?? 'Partager cet article' }}</span>
                            </div>
                            <div class="share-buttons-wrapper">
                                <a class="share-btn share-fb" href="https://www.facebook.com/sharer/sharer.php?u={{ rawurlencode($shareUrl) }}" target="_blank" rel="noopener noreferrer">
                                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M13.5 22v-8.2h2.7l.4-3.2h-3.1V8.5c0-.9.2-1.5 1.5-1.5H17V4.1c-.4 0-1.6-.1-3-.1-3 0-5 1.8-5 5.1v1.5H6v3.2h3V22h4.5z"/></svg>
                                    <span>{{ __('site.share_facebook') ?? 'Facebook' }}</span>
                                </a>
                                <a class="share-btn share-x" href="https://twitter.com/intent/tweet?url={{ rawurlencode($shareUrl) }}&text={{ rawurlencode($shareMessage) }}" target="_blank" rel="noopener noreferrer">
                                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M18.9 2H22l-7.6 8.7L23 22h-6.8l-5.3-6.7L5.1 22H2l8.2-9.4L1 2h6.9l4.8 6.1L18.9 2zm-1.2 18h1.9L7 3.9H5L17.7 20z"/></svg>
                                    <span>{{ __('site.share_twitter') ?? 'X (Twitter)' }}</span>
                                </a>
                                <a class="share-btn share-wa" href="https://api.whatsapp.com/send?text={{ rawurlencode($shareMessage . ' ' . $shareUrl) }}" target="_blank" rel="noopener noreferrer">
                                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M19.1 4.9A9.8 9.8 0 0 0 12 .9C6.5.9 2 5.4 2 10.9c0 1.9.5 3.8 1.5 5.4L2 23l6.9-1.4a10 10 0 0 0 3.1.5c5.5 0 10-4.5 10-10 0-2.6-1-5.1-2.9-7.1zm-7.1 16.3c-1 0-2-.2-2.9-.5l-.2-.1-4.1.8.9-4-.1-.2a8.2 8.2 0 0 1-1.4-4.4c0-4.5 3.7-8.2 8.2-8.2 2.2 0 4.3.9 5.9 2.4A8.2 8.2 0 0 1 20 11c0 4.5-3.7 8.2-8 8.2zm4.7-6.1c-.3-.2-1.8-.9-2-.9s-.4-.2-.6.2c-.2.3-.7.9-.8 1.1-.1.2-.3.2-.6.1-.3-.2-1.1-.4-2.1-1.4-.8-.8-1.4-1.8-1.6-2.1-.2-.3 0-.5.1-.6.1-.1.2-.3.3-.4.1-.1.1-.3.2-.4.1-.1 0-.3 0-.4 0-.1-.6-1.6-.8-2.1-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2 0 1.2.8 2.4.9 2.6.1.2 1.7 2.7 4.2 3.8.6.3 1 .4 1.3.5.5.2 1 .2 1.4.1.4-.1 1.4-.6 1.6-1.2.2-.6.2-1.1.2-1.2 0-.1-.2-.2-.5-.4z"/></svg>
                                    <span>{{ __('site.share_whatsapp') ?? 'WhatsApp' }}</span>
                                </a>
                                <a class="share-btn share-li" href="https://www.linkedin.com/sharing/share-offsite/?url={{ rawurlencode($shareUrl) }}" target="_blank" rel="noopener noreferrer">
                                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M6.2 8.2H2.9V22h3.3V8.2zM4.5 2A1.9 1.9 0 1 0 4.5 5.8 1.9 1.9 0 0 0 4.5 2zM21 22h-3.3v-6.7c0-1.6 0-3.7-2.3-3.7-2.3 0-2.7 1.8-2.7 3.6V22H9.4V8.2h3.2v1.9h.1c.4-.8 1.6-2 3.4-2 3.6 0 4.2 2.4 4.2 5.6V22z"/></svg>
                                    <span>{{ __('site.share_linkedin') ?? 'LinkedIn' }}</span>
                                </a>
                                <a class="share-btn share-tg" href="https://t.me/share/url?url={{ rawurlencode($shareUrl) }}&text={{ rawurlencode($shareMessage) }}" target="_blank" rel="noopener noreferrer">
                                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M21.8 4.6 18.9 20c-.2 1-.8 1.3-1.7.8l-4.7-3.5-2.3 2.2c-.2.2-.4.4-.8.4l.3-4.8L18.4 7c.4-.4-.1-.6-.6-.3L6.3 13.9 1.6 12.5c-1-.3-1-1 .2-1.4L20.4 3.3c.8-.3 1.5.2 1.4 1.3z"/></svg>
                                    <span>{{ __('site.share_telegram') ?? 'Telegram' }}</span>
                                </a>
                            </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>

@push('styles')
<style>
/* Existing builder content styles */
.it-about-2-text table { width:100%; border-collapse: collapse; }
.it-about-2-text table, .it-about-2-text th, .it-about-2-text td { border: 1px solid #444 !important; }
.it-about-2-text th, .it-about-2-text td { padding: 8px 10px; text-align: left; vertical-align: top; }
.it-about-2-text img { max-width:100%; height:auto; display:block; }
.it-about-2-text ul, .it-about-2-text ol { margin: .5rem 0 1rem 1.25rem; }

/* Improved share section styles */
.share-section {
    margin: 2rem 0 1rem;
    text-align: center;
}

.share-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.share-divider::before,
.share-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ddd, transparent);
}

.share-divider span {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6c757d;
    background: white;
    padding: 0 0.75rem;
}

.share-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;  /* increased spacing */
    margin-bottom: 1rem;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1.2rem;
    border-radius: 60px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    background: #f5f5f5;
    color: #333;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.share-btn svg {
    flex-shrink: 0;
}

.share-btn:hover {
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0,0,0,0.1);
}

.share-btn:active {
    transform: translateY(1px);
}

/* Platform specific colors */
.share-fb:hover { background: #1877f2; color: white; }
.share-x:hover { background: #000000; color: white; }
.share-wa:hover { background: #25d366; color: white; }
.share-li:hover { background: #0a66c2; color: white; }
.share-tg:hover { background: #229ed9; color: white; }

/* RTL (Arabic) adjustments */
[dir="rtl"] .share-btn {
    flex-direction: row-reverse;
}
[dir="rtl"] .share-divider::before,
[dir="rtl"] .share-divider::after {
    background: linear-gradient(90deg, #ddd, transparent);
}
[dir="rtl"] .share-divider::before {
    background: linear-gradient(90deg, #ddd, transparent);
}
[dir="rtl"] .share-divider::after {
    background: linear-gradient(90deg, transparent, #ddd);
}
/* Ensure buttons remain visible in RTL */
[dir="rtl"] .share-buttons-wrapper {
    direction: rtl;
}

/* Responsive */
@media (max-width: 576px) {
    .share-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    .share-btn span:not(.share-icon) {
        display: inline;
    }
    .share-buttons-wrapper {
        gap: 0.8rem;
    }
	
}
</style>
@endpush
@endsection