{{-- Social Sharing Buttons Component --}}
@php
    $currentUrl = request()->fullUrl();
    $pageTitle = isset($title) ? $title : (isset($pageTitle) ? $pageTitle : 'KunciLink.id - Boost Your Fans');
    $description = isset($description) ? $description : 'Platform social unlock #1 Indonesia untuk YouTuber, influencer & content creator. Tingkatkan subscriber, followers & engagement organik.';
    $encodedUrl = urlencode($currentUrl);
    $encodedTitle = urlencode($pageTitle);
    $encodedText = urlencode($description);
@endphp

<div class="social-sharing-buttons {{ $class ?? 'my-4' }}">
    @if(isset($showTitle) && $showTitle)
        <h3 class="text-lg font-semibold mb-3 text-gray-800">{{ $shareTitle ?? 'Bagikan Halaman Ini' }}</h3>
    @endif
    
    <div class="flex flex-wrap gap-2 justify-center">
        {{-- WhatsApp --}}
        <a href="https://wa.me/?text={{ $encodedTitle }}%20{{ $encodedUrl }}" 
           target="_blank" 
           class="inline-flex items-center px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg transition-colors duration-200 text-sm font-medium">
            <i class="fab fa-whatsapp mr-2"></i>
            WhatsApp
        </a>
        
        {{-- Telegram --}}
        <a href="https://t.me/share/url?url={{ $encodedUrl }}&text={{ $encodedTitle }}" 
           target="_blank" 
           class="inline-flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-200 text-sm font-medium">
            <i class="fab fa-telegram mr-2"></i>
            Telegram
        </a>
        
        {{-- Facebook --}}
        <a href="https://www.facebook.com/sharer/sharer.php?u={{ $encodedUrl }}" 
           target="_blank" 
           class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 text-sm font-medium">
            <i class="fab fa-facebook mr-2"></i>
            Facebook
        </a>
        
        {{-- Twitter/X --}}
        <a href="https://twitter.com/intent/tweet?url={{ $encodedUrl }}&text={{ $encodedTitle }}" 
           target="_blank" 
           class="inline-flex items-center px-4 py-2 bg-gray-900 hover:bg-black text-white rounded-lg transition-colors duration-200 text-sm font-medium">
            <i class="fab fa-twitter mr-2"></i>
            Twitter
        </a>
        
        {{-- LinkedIn --}}
        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ $encodedUrl }}" 
           target="_blank" 
           class="inline-flex items-center px-4 py-2 bg-blue-700 hover:bg-blue-800 text-white rounded-lg transition-colors duration-200 text-sm font-medium">
            <i class="fab fa-linkedin mr-2"></i>
            LinkedIn
        </a>
        
        {{-- Copy Link --}}
        <button onclick="copyToClipboard('{{ $currentUrl }}')" 
                class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors duration-200 text-sm font-medium">
            <i class="fas fa-copy mr-2"></i>
            Copy Link
        </button>
    </div>
</div>

{{-- JavaScript for Copy to Clipboard --}}
<script>
function copyToClipboard(text) {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(function() {
            showShareToast('Link berhasil disalin!');
        }).catch(function() {
            fallbackCopyTextToClipboard(text);
        });
    } else {
        fallbackCopyTextToClipboard(text);
    }
}

function fallbackCopyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.top = "0";
    textArea.style.left = "0";
    textArea.style.position = "fixed";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
        var successful = document.execCommand('copy');
        if (successful) {
            showShareToast('Link berhasil disalin!');
        } else {
            showShareToast('Gagal menyalin link');
        }
    } catch (err) {
        showShareToast('Gagal menyalin link');
    }
    
    document.body.removeChild(textArea);
}

function showShareToast(message) {
    // Check if toast container exists, if not create it
    let toastContainer = document.getElementById('share-toast-container');
    if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.id = 'share-toast-container';
        toastContainer.className = 'fixed top-4 right-4 z-50';
        document.body.appendChild(toastContainer);
    }
    
    const toast = document.createElement('div');
    toast.className = 'bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg mb-2 transform translate-x-full transition-transform duration-300';
    toast.textContent = message;
    
    toastContainer.appendChild(toast);
    
    // Animate in
    setTimeout(() => {
        toast.classList.remove('translate-x-full');
    }, 100);
    
    // Animate out and remove
    setTimeout(() => {
        toast.classList.add('translate-x-full');
        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, 300);
    }, 2000);
}
</script>