@extends('layouts.modern')

@php
    $locale = app()->getLocale();
    
    // Set Carbon locale for date formatting
    \Carbon\Carbon::setLocale($locale);
    
    $metaTitleField = $locale === 'tr' ? 'meta_title' : 'meta_title_' . $locale;
    $metaDescField = $locale === 'tr' ? 'meta_description' : 'meta_description_' . $locale;
    $metaKeywordsField = $locale === 'tr' ? 'meta_keywords' : 'meta_keywords_' . $locale;
    
    $seoTitle = ($post->$metaTitleField ?? $post->meta_title ?? null) ?: $post->localized_title . ' - FTurkey.com';
    $seoDescription = ($post->$metaDescField ?? $post->meta_description ?? null) ?: $post->localized_excerpt;
    $seoKeywords = $post->$metaKeywordsField ?? $post->meta_keywords ?? null;
    
    // Featured Image - FIX .webp issues
    $featuredImage = $post->featured_image;
    if ($featuredImage) {
        // Remove .webp extension if present
        $featuredImage = preg_replace('/\.webp(\?[^"\']*)?$/i', '.jpg$1', $featuredImage);
        // Normalize path
        if (!str_starts_with($featuredImage, 'http')) {
            $featuredImage = ltrim($featuredImage, '/');
            if (!str_starts_with($featuredImage, 'images/')) {
                if (!str_contains($featuredImage, '/')) {
                    $featuredImage = 'images/blog/' . $featuredImage;
                } else {
                    $featuredImage = 'images/blog/' . basename($featuredImage);
                }
            }
            // Check if file exists
            if (!file_exists(public_path($featuredImage))) {
                $featuredImage = 'images/og-blog.jpg';
            }
        }
        $seoImage = str_starts_with($featuredImage, 'http') ? $featuredImage : asset($featuredImage);
    } else {
        $seoImage = asset('images/og-blog.jpg');
        $featuredImage = 'images/og-blog.jpg';
    }
    $seoType = 'article';
    
    // Process content - REMOVE ALL .webp and picture/source tags
    $rawContent = $post->localized_content;
    
    // STEP 1: Remove ALL picture and source elements completely
    $rawContent = preg_replace('/<picture[^>]*>[\s\S]*?<\/picture>/i', '', $rawContent);
    $rawContent = preg_replace('/<source[^>]*>/i', '', $rawContent);
    
    // STEP 2: Replace ALL .webp with .jpg (ultra aggressive)
    $rawContent = str_ireplace('.webp', '.jpg', $rawContent);
    $rawContent = preg_replace('/\.webp(\?[^"\'>\s<]*)?/i', '.jpg$1', $rawContent);
    
    // STEP 3: Fix all img tags - use og-blog.jpg as placeholder (it exists)
    $placeholderImage = asset('images/og-blog.jpg');
    $rawContent = preg_replace_callback(
        '/<img([^>]*)>/i',
        function($matches) use ($placeholderImage) {
            $tag = $matches[0];
            // Remove .webp from tag
            $tag = str_ireplace('.webp', '.jpg', $tag);
            // Add onerror if not exists
            if (strpos($tag, 'onerror') === false) {
                $tag = str_replace('>', ' onerror="this.onerror=null;this.src=\'' . $placeholderImage . '\'">', $tag);
            }
            return $tag;
        },
        $rawContent
    );
    
    // STEP 4: Extract headings for TOC
    preg_match_all('/<h([2-4])[^>]*>(.*?)<\/h[2-4]>/i', $rawContent, $headings);
    $tocItems = [];
    if (!empty($headings[0])) {
        foreach ($headings[0] as $index => $heading) {
            $level = $headings[1][$index];
            $text = strip_tags($headings[2][$index]);
            $slug = \Illuminate\Support\Str::slug($text) . '-' . $index;
            $tocItems[] = ['level' => $level, 'text' => $text, 'slug' => $slug];
            
            // Add ID to heading
            $rawContent = preg_replace(
                '/<h' . $level . '[^>]*>' . preg_quote($headings[2][$index], '/') . '<\/h' . $level . '>/i',
                '<h' . $level . ' id="' . $slug . '">' . $headings[2][$index] . '</h' . $level . '>',
                $rawContent,
                1
            );
        }
    }
    
    // STEP 5: Insert featured image in the middle of content for SEO
    // Split content by paragraphs and insert image after middle paragraph
    $paragraphs = preg_split('/(<\/p>|<\/h[1-6]>)/i', $rawContent, -1, PREG_SPLIT_DELIM_CAPTURE);
    $totalParagraphs = count($paragraphs);
    $middleIndex = floor($totalParagraphs / 2);
    
    // Find a good insertion point (after a closing </p> or </h> tag)
    $insertionPoint = 0;
    $paragraphCount = 0;
    for ($i = 0; $i < $totalParagraphs; $i++) {
        if (preg_match('/<\/p>|<\/h[1-6]>/i', $paragraphs[$i])) {
            $paragraphCount++;
            if ($paragraphCount >= $middleIndex && $paragraphCount > 2) {
                $insertionPoint = $i + 1;
                break;
            }
        }
    }
    
    // If we found a good insertion point, insert the featured image
    if ($insertionPoint > 0 && $insertionPoint < $totalParagraphs) {
        $featuredImageHtml = '<div class="my-12 text-center">' .
            '<img src="' . asset($featuredImage) . '" ' .
            'alt="' . htmlspecialchars($post->featured_image_alt ?? $post->localized_title) . '" ' .
            'class="w-full max-w-4xl mx-auto rounded-2xl shadow-xl" ' .
            'loading="lazy" ' .
            'decoding="async" ' .
            'width="1200" ' .
            'height="630" ' .
            'onerror="this.onerror=null; this.src=\'' . asset('images/og-blog.jpg') . '\'">' .
            '</div>';
        
        array_splice($paragraphs, $insertionPoint, 0, $featuredImageHtml);
    }
    
    $content = implode('', $paragraphs);
@endphp

@section('content')
<!-- Reading Progress Bar -->
<div id="reading-progress" class="fixed top-0 left-0 w-0 h-1 bg-gradient-to-r from-purple-600 to-blue-500 z-50 transition-all duration-150"></div>

<!-- Article Header -->
<section class="py-8 bg-white border-b border-gray-200">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Breadcrumb -->
        <nav class="flex items-center space-x-2 text-sm text-gray-600 mb-6">
            <a href="{{ route('home') }}" class="hover:text-purple-600">{{ __('common.Ana Sayfa') }}</a>
            <i class="fas fa-chevron-right text-xs"></i>
            <a href="{{ route('blog.index') }}" class="hover:text-purple-600">{{ __('common.Blog') }}</a>
            <i class="fas fa-chevron-right text-xs"></i>
            <a href="{{ route('blog.index', ['category' => $post->category->slug]) }}" class="hover:text-purple-600">{{ $post->category->localized_name }}</a>
            <i class="fas fa-chevron-right text-xs"></i>
            <span class="text-gray-900 font-semibold">{{ Str::limit($post->localized_title, 50) }}</span>
        </nav>
        
        <!-- Category Badge -->
        <div class="mb-4">
            <a href="{{ route('blog.index', ['category' => $post->category->slug]) }}" 
               class="inline-block px-4 py-2 rounded-full text-sm font-bold text-white hover:opacity-90 transition-opacity"
                  style="background-color: {{ $post->category->color }};">
                {{ $post->category->localized_name }}
            </a>
        </div>
        
        <!-- Title -->
        <h1 class="text-4xl md:text-5xl font-black text-gray-900 mb-6 leading-tight">
            {{ $post->localized_title }}
        </h1>
        
        <!-- Meta Info -->
        <div class="flex items-center flex-wrap gap-4 text-gray-500 text-sm mb-6">
            <span><i class="far fa-clock mr-2"></i>{{ $post->reading_time ?? 5 }} {{ __('common.dk okuma') }}</span>
            <span><i class="far fa-eye mr-2"></i>{{ number_format($post->views_count) }} {{ __('common.görüntülenme') }}</span>
            <span><i class="far fa-calendar mr-2"></i>{{ $post->published_at->translatedFormat('d F Y') }}</span>
                @if($post->updated_at && $post->updated_at->gt($post->published_at))
            <span class="text-green-600 font-semibold">
                    <i class="fas fa-sync-alt mr-2"></i>{{ __('common.Son güncelleme') }}: {{ $post->updated_at->translatedFormat('d F Y') }}
                </span>
                @endif
            </div>
    </div>
</section>

<!-- Article Content -->
<section class="py-8 bg-white">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <!-- Main Content Area -->
            <div class="lg:col-span-8">
                <!-- Main Content -->
                <div class="prose prose-lg max-w-none prose-headings:font-black prose-headings:text-gray-900 prose-p:text-gray-700 prose-a:text-purple-600 prose-a:no-underline hover:prose-a:underline prose-strong:text-gray-900 prose-img:rounded-xl prose-img:shadow-lg" id="article-content">
                    {!! $content !!}
        </div>
        
        <!-- Tags -->
        @if($post->tags->count() > 0)
                <div class="mt-8 pt-6 border-t border-gray-200">
                    <div class="flex flex-wrap gap-2">
                        <span class="text-gray-600 font-semibold mr-2">{{ __('common.Etiketler') ?? 'Etiketler' }}:</span>
            @foreach($post->tags as $tag)
            <a href="{{ route('blog.tag', $tag->slug) }}" 
               class="px-3 py-1 rounded-full text-sm font-semibold hover:opacity-80 transition-opacity"
               style="background-color: {{ $tag->color }}20; color: {{ $tag->color }};">
                #{{ $tag->localized_name }}
            </a>
            @endforeach
                    </div>
        </div>
        @endif
    </div>
            
            <!-- Sidebar - Table of Contents -->
            <aside class="lg:col-span-4">
                @if(count($tocItems) > 0)
                <div class="sticky top-24 bg-gray-50 border border-gray-200 rounded-xl p-6">
                    <h2 class="text-xl font-black text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-list-ul mr-3 text-purple-600"></i>
                        {{ __('common.İçindekiler') }}
                    </h2>
                    <ul class="space-y-2 list-none pl-0">
                        @foreach($tocItems as $item)
                        <li style="padding-left: {{ ($item['level'] - 2) * 1.5 }}rem;">
                            <a href="#{{ $item['slug'] }}" 
                               class="text-gray-700 hover:text-purple-600 transition-colors no-underline text-sm block py-1">
                                {{ $item['text'] }}
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
                @endif
            </aside>
        </div>
    </div>
</section>

<!-- Share Buttons -->
<section class="py-6 bg-gray-50 border-t border-gray-200">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-center gap-4">
            <span class="text-gray-700 font-semibold">{{ __('common.Paylaş') ?? 'Paylaş' }}:</span>
            <div class="flex items-center space-x-3">
                @php
                    $shareUrl = urlencode(url()->current());
                    $shareTitle = urlencode($post->localized_title);
                    $shareText = urlencode($post->localized_excerpt);
                @endphp
                <!-- WhatsApp -->
                <a href="https://wa.me/?text={{ $shareTitle }}%20{{ $shareUrl }}" 
                   target="_blank" 
                   rel="noopener noreferrer"
                   class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 text-white hover:bg-green-600 transition-colors"
                   aria-label="WhatsApp'ta Paylaş">
                    <i class="fab fa-whatsapp"></i>
                </a>
                <!-- Telegram -->
                <a href="https://t.me/share/url?url={{ $shareUrl }}&text={{ $shareTitle }}" 
                   target="_blank" 
                   rel="noopener noreferrer"
                   class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition-colors"
                   aria-label="Telegram'da Paylaş">
                    <i class="fab fa-telegram"></i>
                </a>
                <!-- LinkedIn -->
                <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ $shareUrl }}" 
                   target="_blank" 
                   rel="noopener noreferrer"
                   class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-700 text-white hover:bg-blue-800 transition-colors"
                   aria-label="LinkedIn'de Paylaş">
                    <i class="fab fa-linkedin"></i>
                </a>
                <!-- Twitter/X -->
                <a href="https://twitter.com/intent/tweet?url={{ $shareUrl }}&text={{ $shareTitle }}" 
                   target="_blank" 
                   rel="noopener noreferrer"
                   class="flex items-center justify-center w-10 h-10 rounded-full bg-black text-white hover:bg-gray-800 transition-colors"
                   aria-label="Twitter'da Paylaş">
                    <i class="fab fa-x-twitter"></i>
                </a>
                <!-- Facebook -->
                <a href="https://www.facebook.com/sharer/sharer.php?u={{ $shareUrl }}" 
                   target="_blank" 
                   rel="noopener noreferrer"
                   class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white hover:bg-blue-700 transition-colors"
                   aria-label="Facebook'ta Paylaş">
                    <i class="fab fa-facebook"></i>
                </a>
                <!-- Copy Link -->
                <button onclick="copyToClipboard('{{ url()->current() }}')" 
                        class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-600 text-white hover:bg-gray-700 transition-colors"
                        aria-label="{{ __('common.Linki Kopyala') }}"
                        title="{{ __('common.Linki Kopyala') }}">
                    <i class="fas fa-link"></i>
                </button>
            </div>
        </div>
    </div>
</section>

<!-- Related Posts -->
@if($relatedPosts->count() > 0)
<section class="py-12 bg-gray-50 border-t border-gray-200">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-black text-gray-900 mb-8 text-center">{{ __('common.İlgili Yazılar') }}</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($relatedPosts as $relatedPost)
            <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow">
                <div class="relative h-40">
                    @php
                        $relatedImage = $relatedPost->featured_image;
                        if ($relatedImage) {
                            $relatedImage = preg_replace('/\.webp(\?[^"\']*)?$/i', '.jpg$1', $relatedImage);
                            if (!str_starts_with($relatedImage, 'http')) {
                                $relatedImage = ltrim($relatedImage, '/');
                                if (!str_starts_with($relatedImage, 'images/')) {
                                    $relatedImage = 'images/blog/' . basename($relatedImage);
                                }
                                if (!file_exists(public_path($relatedImage))) {
                                    $relatedImage = 'images/og-blog.jpg';
                                }
                            }
                            $relatedImageUrl = str_starts_with($relatedImage, 'http') ? $relatedImage : asset($relatedImage);
                        } else {
                            $relatedImageUrl = asset('images/og-blog.jpg');
                        }
                    @endphp
                    <img src="{{ $relatedImageUrl }}" 
                         alt="{{ $relatedPost->featured_image_alt ?? $relatedPost->localized_title }}" 
                         class="w-full h-full object-cover"
                         loading="lazy"
                         decoding="async"
                         width="400"
                         height="300"
                         onerror="this.onerror=null; this.src='{{ asset('images/og-blog.jpg') }}';">
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-900 mb-3 line-clamp-2">
                        {{ $relatedPost->localized_title }}
                    </h3>
                    <p class="text-gray-600 mb-4 line-clamp-2">
                        {{ $relatedPost->localized_excerpt }}
                    </p>
                    <a href="{{ $relatedPost->localized_route }}" 
                       class="inline-flex items-center font-semibold text-purple-600 hover:text-purple-700">
                        {{ __('common.Devamını Oku') }} <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- CTA -->
<section class="py-16 bg-gradient-to-r from-purple-600 to-blue-500 text-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl md:text-4xl font-black mb-4">
            {{ __('common.Türkiye\'de İş Kurma Sürecinizde Yardıma mı İhtiyacınız Var?') }}
        </h2>
        <p class="text-xl text-white/90 mb-8">
            {{ __('common.Uzman ekibimiz size özel çözümler sunmak için hazır') }}
        </p>
        <a href="{{ route('contact') }}" 
           class="inline-flex items-center px-8 py-4 bg-white text-purple-600 rounded-xl font-bold hover:bg-gray-100 transition-colors">
            {{ __('common.Ücretsiz Danışmanlık Alın') }} <i class="fas fa-arrow-right ml-3"></i>
        </a>
    </div>
</section>

<!-- Scripts -->
<script>
    // Reading Progress Bar
    window.addEventListener('scroll', function() {
        const articleContent = document.getElementById('article-content');
        if (!articleContent) return;
        
        const articleTop = articleContent.offsetTop;
        const articleHeight = articleContent.offsetHeight;
        const windowHeight = window.innerHeight;
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        const articleBottom = articleTop + articleHeight;
        const windowBottom = scrollTop + windowHeight;
        
        if (windowBottom > articleTop && scrollTop < articleBottom) {
            const progress = ((windowBottom - articleTop) / (articleHeight + windowHeight)) * 100;
            document.getElementById('reading-progress').style.width = Math.min(100, Math.max(0, progress)) + '%';
        }
    });
    
    // Copy to Clipboard
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function() {
            const button = event.target.closest('button');
            const originalHTML = button.innerHTML;
            button.innerHTML = '<i class="fas fa-check text-xl"></i>';
            button.classList.add('bg-green-500');
            button.classList.remove('bg-purple-600');
            
            setTimeout(function() {
                button.innerHTML = originalHTML;
                button.classList.remove('bg-green-500');
                button.classList.add('bg-purple-600');
            }, 2000);
        }).catch(function(err) {
            console.error('Copy failed:', err);
        });
    }
    
    // Smooth scroll for TOC links
    document.querySelectorAll('#article-content a[href^="#"]').forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href').substring(1);
            const targetElement = document.getElementById(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
                history.pushState(null, null, '#' + targetId);
            }
        });
    });
    
    // ULTRA AGGRESSIVE: Remove ALL .webp references and source tags on page load
    document.addEventListener('DOMContentLoaded', function() {
        const placeholderImage = '{{ asset("images/og-blog.jpg") }}';
        
        // Remove ALL source tags immediately
        document.querySelectorAll('source').forEach(function(source) {
            source.remove();
        });
        
        // Remove empty picture tags
        document.querySelectorAll('picture').forEach(function(picture) {
            const img = picture.querySelector('img');
            if (img) {
                picture.parentNode.replaceChild(img, picture);
            } else {
                picture.remove();
            }
        });
        
        // Fix all images
        function fixAllImages() {
            document.querySelectorAll('img').forEach(function(img) {
                // Fix src
                if (img.src && img.src.includes('.webp')) {
                    img.src = img.src.replace(/\.webp(\?[^"]*)?$/i, '.jpg$1');
                }
                // Fix data-src
                if (img.dataset.src && img.dataset.src.includes('.webp')) {
                    img.dataset.src = img.dataset.src.replace(/\.webp(\?[^"]*)?$/i, '.jpg$1');
                }
                // Fix srcset
                if (img.srcset && img.srcset.includes('.webp')) {
                    img.srcset = img.srcset.replace(/\.webp(\?[^"']*)?/gi, '.jpg$1');
                }
                // Add error handler
                if (!img.onerror) {
                    img.onerror = function() {
                        this.onerror = null;
                        if (this.src !== placeholderImage) {
                            this.src = placeholderImage;
                        }
                    };
                }
            });
        }
        
        fixAllImages();
        
        // Fix content area
        const content = document.getElementById('article-content');
        if (content) {
            content.innerHTML = content.innerHTML.replace(/\.webp(\?[^"']*)?/gi, '.jpg$1');
            content.querySelectorAll('source').forEach(function(s) { s.remove(); });
        }
        
        // Run multiple times to catch dynamic content
        setTimeout(fixAllImages, 100);
        setTimeout(fixAllImages, 500);
        setTimeout(fixAllImages, 1000);
    });
</script>

{{-- Structured Data for Blog Post - Article Schema --}}
{!! App\Helpers\SeoHelper::generateStructuredData('article', [
    'headline' => $post->localized_title,
    'description' => $post->localized_excerpt,
    'image' => $seoImage,
    'datePublished' => $post->published_at->toIso8601String(),
    'dateModified' => $post->updated_at->toIso8601String(),
    'url' => url()->current(),
    'author' => [
        '@type' => 'Person',
        'name' => $post->author->name ?? 'FTurkey.com Team'
    ],
    'publisher' => [
        '@type' => 'Organization',
        'name' => 'FTurkey.com',
        'logo' => [
            '@type' => 'ImageObject',
            'url' => asset('images/logo.png')
        ]
    ]
]) !!}

{{-- FAQ Schema --}}
@if(isset($faqs) && count($faqs) > 0)
@php
    $faqQuestions = [];
    foreach ($faqs as $faq) {
        $faqQuestions[] = [
            '@type' => 'Question',
            'name' => $faq['question'],
            'acceptedAnswer' => [
                '@type' => 'Answer',
                'text' => $faq['answer']
            ]
        ];
    }
@endphp
{!! App\Helpers\SeoHelper::generateStructuredData('faq', ['questions' => $faqQuestions]) !!}
@endif

{{-- HowTo Schema --}}
@if(isset($howToSteps) && count($howToSteps) > 0)
{!! App\Helpers\SeoHelper::generateHowTo(
    $post->localized_title,
    $post->localized_excerpt,
    $howToSteps,
    [
        'image' => $seoImage,
        'totalTime' => 'PT' . ($post->reading_time ?? 10) . 'M'
    ]
) !!}
@endif

{!! App\Helpers\SeoHelper::generateBreadcrumb([
    ['name' => __('common.Ana Sayfa'), 'url' => url('/')],
    ['name' => __('common.Blog'), 'url' => route('blog.index')],
    ['name' => $post->localized_title, 'url' => url()->current()]
]) !!}
@endsection