takeone-youtube-clone/resources/views/layouts/partials/share-modal.blade.php

<!-- Share Modal -->
<div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px;">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color); padding: 20px 24px;">
                <h5 class="modal-title" id="shareModalLabel" style="font-weight: 600; color: var(--text-primary);">
                    <i class="bi bi-share me-2"></i>Share Video
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="padding: 24px;">
                <p style="color: var(--text-secondary); margin-bottom: 16px;">Share this video with your friends:</p>
                
                <div class="share-link-container" style="display: flex; gap: 8px; align-items: center;">
                    <input type="text" id="shareLinkInput" class="form-control" readonly 
                           style="background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); padding: 12px 16px; border-radius: 8px;">
                    <button type="button" id="copyLinkBtn" class="btn-copy" 
                            style="background: var(--brand-red); color: white; border: none; padding: 12px 20px; border-radius: 8px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.2s;">
                        <i class="bi bi-clipboard me-1"></i> Copy
                    </button>
                </div>
                
                <div id="copySuccess" class="copy-success" style="display: none; margin-top: 12px; color: #4caf50; font-size: 14px; text-align: center;">
                    <i class="bi bi-check-circle-fill me-1"></i> Link copied to clipboard!
                </div>
                
                <div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
                    <p style="color: var(--text-secondary); font-size: 13px; margin-bottom: 12px;">Share on social media:</p>
                    <div style="display: flex; gap: 12px;">
                        <a href="#" id="shareFacebook" class="social-share-btn" target="_blank" 
                           style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #1877f2; color: white; text-decoration: none;">
                            <i class="bi bi-facebook"></i>
                        </a>
                        <a href="#" id="shareTwitter" class="social-share-btn" target="_blank"
                           style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #1da1f2; color: white; text-decoration: none;">
                            <i class="bi bi-twitter-x"></i>
                        </a>
                        <a href="#" id="shareWhatsApp" class="social-share-btn" target="_blank"
                           style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #25d366; color: white; text-decoration: none;">
                            <i class="bi bi-whatsapp"></i>
                        </a>
                        <a href="#" id="shareTelegram" class="social-share-btn" target="_blank"
                           style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0088cc; color: white; text-decoration: none;">
                            <i class="bi bi-telegram"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.social-share-btn {
    transition: transform 0.2s, opacity 0.2s;
}
.social-share-btn:hover {
    transform: scale(1.1);
    opacity: 0.9;
}
.btn-copy:hover {
    background: #cc1a1a !important;
}
.btn-copy.copied {
    background: #4caf50 !important;
}
</style>

<script>
function openShareModal(videoUrl, videoTitle) {
    document.getElementById('shareLinkInput').value = videoUrl;
    
    // Update social share links
    var encodedUrl = encodeURIComponent(videoUrl);
    var encodedTitle = encodeURIComponent(videoTitle);
    
    document.getElementById('shareFacebook').href = 'https://www.facebook.com/sharer/sharer.php?u=' + encodedUrl;
    document.getElementById('shareTwitter').href = 'https://twitter.com/intent/tweet?url=' + encodedUrl + '&text=' + encodedTitle;
    document.getElementById('shareWhatsApp').href = 'https://wa.me/?text=' + encodedTitle + ' ' + encodedUrl;
    document.getElementById('shareTelegram').href = 'https://t.me/share/url?url=' + encodedUrl + '&text=' + encodedTitle;
    
    // Reset copy button state
    var copyBtn = document.getElementById('copyLinkBtn');
    copyBtn.innerHTML = '<i class="bi bi-clipboard me-1"></i> Copy';
    copyBtn.classList.remove('copied');
    document.getElementById('copySuccess').style.display = 'none';
    
    // Show modal
    var modal = new bootstrap.Modal(document.getElementById('shareModal'));
    modal.show();
}

document.addEventListener('DOMContentLoaded', function() {
    var copyBtn = document.getElementById('copyLinkBtn');
    var shareInput = document.getElementById('shareLinkInput');
    var copySuccess = document.getElementById('copySuccess');
    
    if (copyBtn && shareInput) {
        copyBtn.addEventListener('click', function() {
            shareInput.select();
            shareInput.setSelectionRange(0, 99999);
            
            navigator.clipboard.writeText(shareInput.value).then(function() {
                copyBtn.innerHTML = '<i class="bi bi-check-lg me-1"></i> Copied!';
                copyBtn.classList.add('copied');
                copySuccess.style.display = 'block';
                
                setTimeout(function() {
                    copyBtn.innerHTML = '<i class="bi bi-clipboard me-1"></i> Copy';
                    copyBtn.classList.remove('copied');
                    copySuccess.style.display = 'none';
                }, 2000);
            }).catch(function(err) {
                console.error('Failed to copy: ', err);
                // Fallback for older browsers
                document.execCommand('copy');
                copyBtn.innerHTML = '<i class="bi bi-check-lg me-1"></i> Copied!';
                copySuccess.style.display = 'block';
            });
        });
    }
});
</script>