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

<div class="card {{ $cardClass ?? 'mb-4' }}">
    <div class="card-header">
        <h3 class="card-title">
            <i class="fas fa-share-alt mr-2"></i>
            {{ $shareTitle ?? 'Bagikan Halaman Ini' }}
        </h3>
    </div>
    <div class="card-body">
        @if(isset($showDescription) && $showDescription)
            <p class="text-muted mb-3">{{ $shareDescription ?? 'Bagikan halaman ini ke sosial media atau salin link untuk dibagikan.' }}</p>
        @endif
        
        <div class="row">
            {{-- WhatsApp --}}
            <div class="col-6 col-md-4 col-lg-2 mb-2">
                <a href="https://wa.me/?text={{ $encodedTitle }}%20{{ $encodedUrl }}" 
                   target="_blank" 
                   class="btn btn-success btn-block btn-sm">
                    <i class="fab fa-whatsapp mr-1"></i>
                    WhatsApp
                </a>
            </div>
            
            {{-- Telegram --}}
            <div class="col-6 col-md-4 col-lg-2 mb-2">
                <a href="https://t.me/share/url?url={{ $encodedUrl }}&text={{ $encodedTitle }}" 
                   target="_blank" 
                   class="btn btn-info btn-block btn-sm">
                    <i class="fab fa-telegram mr-1"></i>
                    Telegram
                </a>
            </div>
            
            {{-- Facebook --}}
            <div class="col-6 col-md-4 col-lg-2 mb-2">
                <a href="https://www.facebook.com/sharer/sharer.php?u={{ $encodedUrl }}" 
                   target="_blank" 
                   class="btn btn-primary btn-block btn-sm">
                    <i class="fab fa-facebook mr-1"></i>
                    Facebook
                </a>
            </div>
            
            {{-- Twitter/X --}}
            <div class="col-6 col-md-4 col-lg-2 mb-2">
                <a href="https://twitter.com/intent/tweet?url={{ $encodedUrl }}&text={{ $encodedTitle }}" 
                   target="_blank" 
                   class="btn btn-dark btn-block btn-sm">
                    <i class="fab fa-twitter mr-1"></i>
                    Twitter
                </a>
            </div>
            
            {{-- LinkedIn --}}
            <div class="col-6 col-md-4 col-lg-2 mb-2">
                <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ $encodedUrl }}" 
                   target="_blank" 
                   class="btn btn-secondary btn-block btn-sm">
                    <i class="fab fa-linkedin mr-1"></i>
                    LinkedIn
                </a>
            </div>
            
            {{-- Copy Link --}}
            <div class="col-6 col-md-4 col-lg-2 mb-2">
                <button onclick="copyToClipboardAdmin('{{ $currentUrl }}')" 
                        class="btn btn-outline-secondary btn-block btn-sm">
                    <i class="fas fa-copy mr-1"></i>
                    Copy Link
                </button>
            </div>
        </div>
    </div>
</div>

{{-- JavaScript for Copy to Clipboard (AdminLTE compatible) --}}
<script>
function copyToClipboardAdmin(text) {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(function() {
            showAdminToast('Link berhasil disalin!', 'success');
        }).catch(function() {
            fallbackCopyTextToClipboardAdmin(text);
        });
    } else {
        fallbackCopyTextToClipboardAdmin(text);
    }
}

function fallbackCopyTextToClipboardAdmin(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) {
            showAdminToast('Link berhasil disalin!', 'success');
        } else {
            showAdminToast('Gagal menyalin link', 'error');
        }
    } catch (err) {
        showAdminToast('Gagal menyalin link', 'error');
    }
    
    document.body.removeChild(textArea);
}

function showAdminToast(message, type = 'success') {
    // Use AdminLTE toast if available, otherwise fallback to custom toast
    if (typeof $(document).Toasts === 'function') {
        $(document).Toasts('create', {
            class: type === 'success' ? 'bg-success' : 'bg-danger',
            title: type === 'success' ? 'Berhasil' : 'Error',
            subtitle: 'KunciLink',
            body: message,
            autohide: true,
            delay: 3000
        });
    } else {
        // Fallback to custom toast
        let toastContainer = document.getElementById('admin-toast-container');
        if (!toastContainer) {
            toastContainer = document.createElement('div');
            toastContainer.id = 'admin-toast-container';
            toastContainer.className = 'position-fixed';
            toastContainer.style.top = '20px';
            toastContainer.style.right = '20px';
            toastContainer.style.zIndex = '9999';
            document.body.appendChild(toastContainer);
        }
        
        const toast = document.createElement('div');
        const bgClass = type === 'success' ? 'alert-success' : 'alert-danger';
        toast.className = `alert ${bgClass} alert-dismissible fade show mb-2`;
        toast.innerHTML = `
            <strong>${type === 'success' ? 'Berhasil!' : 'Error!'}</strong> ${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        `;
        
        toastContainer.appendChild(toast);
        
        // Auto remove after 3 seconds
        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, 3000);
    }
}
</script>