@extends("website.service-providers.layouts.layout")
@section('title',"Services")
@section("body")
<section class="banner-services">
    <img class="banner-background-ellipse" src="{{ asset('webAssets/assets/images/banner-bg-img.png') }}" alt="">
</section>

<!-- Include Toastr CSS and JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

<style>
.social-share-buttons a {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 15px;
    color: white;
    border-radius: 5px;
    text-decoration: none;
}

.social-share-buttons .btn-primary {
    background-color: #3b5998; /* Facebook color */
}

.social-share-buttons .btn-info {
    background-color: #00aced; /* Twitter color */
}

.social-share-buttons .btn-success {
    background-color: #25D366; /* WhatsApp color */
}

.social-share-buttons .btn-primary.linkedin {
    background-color: #0077B5; /* LinkedIn color */
}

.social-share-buttons img {
    width: 20px;
    margin-right: 5px;
}

/* Modal Styles */
.modal-content {
    border: none;
    border-radius: 15px;
}

.modal-header {
    border-bottom: none;
}

.referral-message-box {
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
}

.referral-message-text {
    font-size: 14px;
    line-height: 1.5;
}

.btn-facebook {
    background-color: #1877f2;
    border-color: #1877f2;
    color: white;
}

.btn-twitter {
    background-color: #1da1f2;
    border-color: #1da1f2;
    color: white;
}

.btn-linkedin {
    background-color: #0077b5;
    border-color: #0077b5;
    color: white;
}

.btn-whatsapp {
    background-color: #25d366;
    border-color: #25d366;
    color: white;
}

.btn-facebook:hover,
.btn-twitter:hover,
.btn-linkedin:hover,
.btn-whatsapp:hover {
    opacity: 0.9;
    color: white;
}

/* Referral Details Styles */
.referral-details-section {
    margin-top: 40px;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
}

.referral-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    text-align: center;
    align-items: center;
}

.stat-item {
    flex: 1;
}

.stat-number {
    font-size: 32px;
    font-weight: bold;
    color: #4285f4;
    margin: 0;
}

.stat-label {
    color: #666;
    font-size: 14px;
    margin-top: 5px;
}

.referral-history-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-left {
    flex: 1;
}

.history-sr-id {
    color: #4285f4;
    font-weight: bold;
    font-size: 16px;
}

.history-service {
    font-weight: 600;
    margin: 5px 0;
}

.history-client {
    color: #666;
    font-size: 14px;
}

.referral-status {
    color: #28a745;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.referral-status::before {
    content: "✓";
    background: #28a745;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    font-size: 10px;
}

.history-right {
    text-align: right;
}

.bonus-amount {
    color: #28a745;
    font-weight: bold;
    font-size: 18px;
}

.how-it-works {
    margin-top: 30px;
}

.work-step {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.step-icon {
    width: 40px;
    height: 40px;
    background: #4285f4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: white;
    font-size: 18px;
}

.step-content h6 {
    margin: 0 0 5px 0;
    font-weight: bold;
}

.step-content p {
    margin: 0;
    color: #666;
    font-size: 14px;
}
</style>

<!--- Breadcrumbs section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Profile</li>
                <li class="breadcrumb-item active" aria-current="page">Refer & Earn</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Main section started -->
<section class="dashboard-main">
    <div class="container">
        <div class="row">
            @include("website.service-providers.includes.sidebar")
            @include("website.layouts.modal")

            <div class="main-content">
                <div class="main-content-wrapper my-profile">
                    <h3 class="font-size-18 refer-earn-heading">Refer & Earn</h3>
                    <div class="profile-refer-earn d-flex flex-column align-items-center">
                        <div class="refer-earn-block d-flex flex-column">
                            <div class="refer-earn-items refer-earn-img d-flex flex-column align-items-center">
                                <h3 class="font-size-24">Help Your Friends, Get bonus</h3>
                                <img src="{{ asset('webAssets/assets/images/refer-earn.png') }}" alt="refer">
                                <h3 class="font-size-18">Refer and Earn</h3>
                                <p class="font-size-18">Invite a Friend and get Bounce. Share below code to refer
                                </p>

                                <div class="refer-earn-coupon d-flex gap-4px align-items-center">
                                    <p class="font-size-18" id="referCode">{{ $user->my_referral_code ?? 'No code available' }}</p>
                                    <button class="btn" id="copyButton">
                                        <img src="{{ asset('webAssets/assets/images/copy-btn-img.svg') }}" alt="copy-btn">
                                    </button>
                                </div>

                                <div class="refer-earn-action-btn w-100">
                                    <button class="btn btn-primary w-100" id="inviteFriendsButton" data-code="{{ $user->my_referral_code ?? 'XSDFTD' }}">
                                        Invite Friends
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Referral Details Section -->
                    <div class="referral-details-section">
                        <h4>Referral Details</h4>
                        
                        <!-- Stats -->
                        <div class="referral-stats">
                            <div class="stat-item">
                                <div class="stat-number" id="totalReferrals">0</div>
                                <div class="stat-label">Total Referrals</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number" id="successfulReferrals">0</div>
                                <div class="stat-label">Successful</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number" id="totalEarned">$0</div>
                                <div class="stat-label">Total Earned</div>
                            </div>
                        </div>

                        <!-- Referral History -->
                        <div class="referral-history">
                            <h5>Referral History</h5>
                            <div id="referralHistoryContainer">
                                <!-- History items will be loaded here -->
                            </div>
                        </div>

                        <!-- How it Works -->
                        <div class="how-it-works">
                            <h5>How it Works</h5>
                            <div class="work-step">
                                <div class="step-icon">📤</div>
                                <div class="step-content">
                                    <h6>Share Your Code</h6>
                                    <p>Share your unique referral code with friends and family</p>
                                </div>
                            </div>
                            <div class="work-step">
                                <div class="step-icon">👤</div>
                                <div class="step-content">
                                    <h6>Friend Signs Up</h6>
                                    <p>Your friend uses your code to create an account</p>
                                </div>
                            </div>
                            <div class="work-step">
                                <div class="step-icon">💰</div>
                                <div class="step-content">
                                    <h6>Earn Rewards</h6>
                                    <p>Both you and your friend get rewards when they complete their first job</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal for sharing using the new structure -->
            <div class="modal fade" id="shareProfileModal" tabindex="-1" aria-labelledby="shareProfileModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header border-0 pb-0">
                            <h5 class="modal-title fw-bold" id="shareProfileModalLabel">Invite Friends</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body pt-2">
                            <div class="text-center mb-4">
                                <div class="referral-message-box p-3 bg-light rounded">
                                    <p class="mb-2 text-muted">Share this message with your friends:</p>
                                    <div class="referral-message-text p-3 bg-white rounded border">
                                        <p class="mb-2">🎉 Hey! I'm using this amazing platform for home services and thought you'd love it too!</p>
                                        <p class="mb-2">Use my referral code: <strong id="modalReferralCode">{{ $user->my_referral_code ?? 'XSDFTD' }}</strong></p>
                                        <p class="mb-0">Sign up and we both get rewards when you complete your first job! 💰</p>
                                    </div>
                                    <button class="btn btn-outline-primary btn-sm mt-2" id="copyMessage">
                                        <i class="fas fa-copy me-1"></i> Copy Message
                                    </button>
                                </div>
                            </div>
                            
                            <div class="text-center mb-4">
                                <p class="text-muted mb-2">Or share the referral link:</p>
                                <div class="input-group">
                                    <input type="text" id="profileShareLink" class="form-control"
                                        value="https://yourwebsite.com/?ref={{ $user->my_referral_code ?? 'NoCodeAvailable' }}" readonly>
                                    <button class="btn btn-outline-secondary" id="copyProfileLink">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="text-center">
                                <p class="text-muted mb-3">Share on social media:</p>
                                <div class="d-flex justify-content-center gap-2 flex-wrap">
                                    <a href="#" id="facebookShare" target="_blank" class="btn btn-facebook btn-sm">
                                        <i class="fab fa-facebook-f me-1"></i> Facebook
                                    </a>
                                    <a href="#" id="twitterShare" target="_blank" class="btn btn-twitter btn-sm">
                                        <i class="fab fa-twitter me-1"></i> Twitter
                                    </a>
                                    <a href="#" id="linkedinShare" target="_blank" class="btn btn-linkedin btn-sm">
                                        <i class="fab fa-linkedin-in me-1"></i> LinkedIn
                                    </a>
                                    <a href="#" id="whatsappShare" target="_blank" class="btn btn-whatsapp btn-sm">
                                        <i class="fab fa-whatsapp me-1"></i> WhatsApp
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of modal -->

        </div>
    </div>
</section>

<!-- Script for invite functionality and referral details -->
<script>
// Load referral details when page loads
document.addEventListener('DOMContentLoaded', function() {
    loadReferralDetails();
});

// Function to load referral details
function loadReferralDetails() {
    fetch('{{ route("getReferralDetails") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            updateReferralStats(data.success.data);
            updateReferralHistory(data.success.data.referral_details);
        } else {
            console.error('Error loading referral details:', data.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

// Update referral stats
function updateReferralStats(data) {
    document.getElementById('totalReferrals').textContent = data.summary.total_referred_bonus_sp;
    document.getElementById('successfulReferrals').textContent = data.summary.total_referred_bonus_sp;
    document.getElementById('totalEarned').textContent = '$' + data.summary.total_referral_bonus;
}

// Update referral history
function updateReferralHistory(referralDetails) {
    const container = document.getElementById('referralHistoryContainer');
    
    if (referralDetails.length === 0) {
        container.innerHTML = '<p class="text-center text-muted">No referral history found.</p>';
        return;
    }

    let historyHTML = '';
    referralDetails.forEach(referral => {
        historyHTML += `
            <div class="referral-history-item">
                <div class="history-left">
                    <div class="history-sr-id">${referral.sr_id}</div>
                    <div class="history-service">${referral.sub_category_name}</div>
                    <div class="history-client">Client: ${referral.client_name}</div>
                    <div class="referral-status">Referral Applied</div>
                </div>
                <div class="history-right">
                    <div class="bonus-amount">+$${referral.ref_bonus_rec_sp}</div>
                </div>
            </div>
        `;
    });
    
    container.innerHTML = historyHTML;
}

document.getElementById('inviteFriendsButton').addEventListener('click', function() {
    // Get the referral code
    var referralCode = this.getAttribute('data-code') || '{{ $user->my_referral_code ?? "XSDFTD" }}';

    // Update the modal content with the referral code
    document.getElementById('modalReferralCode').textContent = referralCode;
    
    // Update the share URL and social links
    var shareUrl = "https://yourwebsite.com/?ref=" + referralCode;
    var shareMessage = "🎉 Hey! I'm using this amazing platform for home services and thought you'd love it too! Use my referral code: " + referralCode + " Sign up and we both get rewards when you complete your first job! 💰 " + shareUrl;
    
    document.getElementById('profileShareLink').value = shareUrl;

    // Update social media share links
    document.getElementById('facebookShare').href = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(shareUrl);
    document.getElementById('twitterShare').href = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(shareMessage);
    document.getElementById('linkedinShare').href = "https://www.linkedin.com/sharing/share-offsite/?url=" + encodeURIComponent(shareUrl);
    document.getElementById('whatsappShare').href = "https://api.whatsapp.com/send?text=" + encodeURIComponent(shareMessage);

    // Show the modal
    $('#shareProfileModal').modal('show');
});

// Copy referral message to clipboard
document.getElementById('copyMessage').addEventListener('click', function() {
    var referralCode = document.getElementById('modalReferralCode').textContent;
    var shareUrl = "https://yourwebsite.com/?ref=" + referralCode;
    var message = "🎉 Hey! I'm using this amazing platform for home services and thought you'd love it too!\n\nUse my referral code: " + referralCode + "\n\nSign up and we both get rewards when you complete your first job! 💰\n\n" + shareUrl;

    if (navigator.clipboard) {
        navigator.clipboard.writeText(message)
            .then(function() {
                toastr.success('Referral message copied to clipboard!');
            })
            .catch(function(err) {
                console.error('Error copying text: ', err);
                fallbackCopyTextToClipboard(message);
            });
    } else {
        fallbackCopyTextToClipboard(message);
    }
});

// Copy referral code to clipboard
document.getElementById('copyButton').addEventListener('click', function() {
    var copyText = document.getElementById("referCode").innerText;

    // Use the modern clipboard API to copy the referral code
    if (navigator.clipboard) {
        navigator.clipboard.writeText(copyText)
            .then(function() {
                // Show Toastr notification
                toastr.success('Referral code copied: ' + copyText);
            })
            .catch(function(err) {
                console.error('Error copying text: ', err);
                fallbackCopyTextToClipboard(copyText);
            });
    } else {
        fallbackCopyTextToClipboard(copyText);
    }
});

// Fallback function to copy using execCommand
function fallbackCopyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();

    try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        toastr.success('Fallback: Referral code copy was ' + msg);
    } catch (err) {
        console.error('Fallback: Oops, unable to copy', err);
        toastr.error('Failed to copy the referral code.');
    }

    document.body.removeChild(textArea);
}

// Copy referral link to clipboard using modern Clipboard API
document.getElementById('copyProfileLink').addEventListener('click', function() {
    var profileLink = document.getElementById('profileShareLink');

    if (navigator.clipboard) {
        navigator.clipboard.writeText(profileLink.value)
            .then(function() {
                toastr.success('Profile link copied: ' + profileLink.value);
            })
            .catch(function(err) {
                console.error('Error copying text: ', err);
                fallbackCopyTextToClipboard(profileLink.value);
            });
    } else {
        fallbackCopyTextToClipboard(profileLink.value);
    }
});
</script>

@endsection