sirpremiumv2/resources/views/livewire/share-code-component.blade.php

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 my-12">
    <div>
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="px-4 py-5 sm:px-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Compartir Código</h3>
                <p class="mt-1 max-w-2xl text-sm text-gray-500">
                    Comparte tu código de referido.
                </p>
                <div class="mt-4 p-4 bg-gray-100 rounded">
                    <span class="text-sm text-gray-700">Tu código:</span>
                    <div class="flex items-center mt-2">
                        <input type="text" id="referralLink" value="{{ route('register', ['ref' => Auth::user()->referral_code]) }}" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" readonly >
                        <button onclick="copyToClipboard()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" >
                            Copiar
                        </button>
                    </div>
                    <p id="copyFeedback" class="hidden text-green-600 text-xs mt-1"></p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12">
    <div class="bg-white">
        <div class="flex items-center justify-between mb-4">
            <div class="px-4 py-5 sm:px-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Mis Referidos</h3>
                <p class="mt-1 text-sm text-gray-500">
                    Aquí puedes ver la lista de tus referidos.
                </p>
            </div>
            <div class="flex flex-col items-center space-x-2 bg-purple-50 px-4 py-2 rounded-l-lg shadow-sm">
                <span class="text-gray-600 text-sm">Total de referidos</span>
                <div class="flex items-center space-x-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"  class="w-6 h-6 text-purple-600" >
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
                    </svg>

                    <span class="text-purple-700 font-semibold text-lg">
                        {{ $referrals->count() }}
                    </span>
                </div>
            </div>
        </div>

        <div class="shadow overflow-hidden sm:rounded-lg">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                Fecha
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                Usuario
                            </th>
                            <th class="px-6 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                Referidos del usuario
                            </th>
                            <th class="px-6 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                Estado
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-100">
                        @forelse ($referrals as $item)
                            <tr class="hover:bg-gray-50 transition duration-150">
                                <td class="px-6 py-4 text-sm text-gray-700">{{ $item->created_at->format('Y-m-d') }}</td>
                                <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ $item->email }}</td>
                                <td class="px-6 py-4 text-center text-sm text-gray-700">{{ $item->children_count }}</td>
                                <td class="px-6 py-4 text-center select-none">
                                    <span class="px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-700">
                                        Inactivo
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">
                                    No tienes referidos aún.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<script>
function copyToClipboard() {
    const copyText = document.getElementById("referralLink");

    copyText.select();
    copyText.setSelectionRange(0, 99999);

    document.execCommand("copy");

    const feedback = document.getElementById("copyFeedback");
    feedback.classList.remove("hidden");

    setTimeout(() => {
        feedback.classList.add("hidden");
    }, 2000);
}
</script>