@extends('user.layout')

@section('content')

<style>
    h4.fw-bold.mb-3 {
        font-family: Lato;
        font-weight: 700;
        font-size: 22px;
        line-height: 100%;
        letter-spacing: 0%;
    }

    h4.fw-bold.mb-2,
    .form-label.fw-semibold.mb-2 {
        font-family: Lato;
        font-weight: 400;
        font-size: 16px;
        line-height: 18px;
        text-align: center;
        color: #efbf04 !important;
    }

    p.text-white.mb-4 {
        font-family: Lato;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        color: #ffffff;
    }

    /* Referral Box */
    .referral-wrapper {
        /* background-color: #FFFFFF; */
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64) !important;
        color: #fff !important;
        border-radius: 8px;
        padding: 10px 15px;
        gap: 10px;
    }

    /* Referral Text */
    .referral-wrapper span {
        font-family: Lato;
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        color: #ffffff;
        word-break: break-word;
        flex: 1;
    }

    /* Copy Button */
    .copy-btn {

        border: none;
        padding: 10px 24px;
        border-radius: 10px;
        font-weight: 500;
        transition: 0.3s;
        white-space: nowrap;
    }


    .card {
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64) !important;

    }

    /* Responsive Fix */
    @media (max-width: 576px) {

        .card-body {
            padding: 25px 15px !important;
        }

        .referral-wrapper {
            flex-direction: column;
            align-items: stretch !important;
        }

        .copy-btn {
            width: 100%;
            margin-top: 8px;
        }

        h4.fw-bold.mb-3 {
            font-size: 18px;
        }

        p.text-white.mb-4 {
            font-size: 14px;
            line-height: 20px;
        }
    }

    .info-box {
        background: rgba(255, 255, 255, 0.08);
        padding: 12px;
        border-radius: 8px;
        font-size: 13px;
    }

    .info-box ul {
        padding-left: 18px;
    }

    .info-box li {
        margin-bottom: 6px;
    }

    .tips-box {
        color: #ffff;
        font-size: 12px;
    }

    .stats-box {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 12px;
    }

    .stats-box small {
        color: #bbb;
    }

    /* Base pill */
    .share-pill {
        display: inline-flex;
        align-items: center;
        gap: 0;
        overflow: hidden;

        width: 42px;
        /* icon only */
        height: 42px;
        padding: 0 12px;

        border-radius: 50px;
        color: #fff;
        text-decoration: none;

        transition: all 0.35s ease;
    }

    /* Icon */
    .share-pill i {
        font-size: 20px;
        min-width: 20px;
        text-align: center;
    }

    /* Hidden text */
    .share-pill span {
        opacity: 0;
        white-space: nowrap;
        margin-left: 0;
        transition: all 0.3s ease;
    }

    /* Hover expand */
    .share-pill:hover {
        width: 140px;
    }

    /* Show text on hover */
    .share-pill:hover span {
        opacity: 1;
        margin-left: 8px;
    }

    /* Colors */
    .share-pill.whatsapp {
        background: #25D366;
    }

    .share-pill.telegram {
        background: #229ED9;
    }
</style>

<style>
    /* CARD BASE */
    .package-card {
        position: relative;
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64);
        border-radius: 15px;
        padding: 10px;
        color: #fff;
        margin: 10px;
        overflow: hidden;
        box-shadow: 0 20px 80px rgba(0, 0, 0, 0.3);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .package-card:hover {
        transform: translateY(-10px) scale(1.02);
    }

    .card-glow {
        position: absolute;
        width: 200%;
        height: 200%;
        top: -50%;
        left: -50%;
        pointer-events: none;
        overflow: hidden;
    }

    /* Cube face effect */
    .card-glow::before {
        content: "";
        position: absolute;
        width: 40%;
        height: 40%;
        background: linear-gradient(135deg,
                rgba(255, 215, 0, 0.15),
                rgba(10, 31, 68, 0.08));
        transform: rotate(25deg);
        animation: cubeMove 6s linear infinite;
    }

    /* Optional second face for depth */
    .card-glow::after {
        content: "";
        position: absolute;
        width: 30%;
        height: 30%;
        background: linear-gradient(135deg,
                rgba(255, 215, 0, 0.1),
                transparent);
        transform: rotate(-25deg);
        animation: cubeMoveAlt 8s linear infinite;
    }

    @keyframes cubeMove {
        0% {
            top: -20%;
            left: -20%;
        }

        50% {
            top: 60%;
            left: 60%;
        }

        100% {
            top: -20%;
            left: -20%;
        }
    }

    @keyframes cubeMoveAlt {
        0% {
            top: 80%;
            left: -10%;
        }

        50% {
            top: -20%;
            left: 70%;
        }

        100% {
            top: 80%;
            left: -10%;
        }
    }

    /* TEXT */
    .package-title {
        font-size: 22px;
        font-weight: 600;
        color: White !important;
    }

    .package-price {
        font-size: 32px;
        color: #d4af37;
        font-weight: bold;
        margin: 10px 0;
    }

    .package-features {
        list-style: none;
        padding: 0;
        margin: 15px 0;
    }

    .package-features li {
        margin-bottom: 8px;
        font-size: 14px;
    }

    /* FINGER ANIMATION */
    .finger-wrapper {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
    }

    .finger {
        font-size: 28px;
        animation: fingerBounce 1.2s infinite;
    }

    @keyframes fingerBounce {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(8px);
        }
    }

    /* ATTENTION BUTTON */
    .btn-buy {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 10px;
        font-weight: bold;
        background: linear-gradient(45deg, #d4af37, #ffd700);
        color: #000;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    /* PULSE ANIMATION */
    .btn-buy::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        top: 0;
        left: 0;
        box-shadow: 0 0 0 rgba(255, 215, 0, 0.7);
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
        }

        70% {
            box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
        }
    }

    .btn-buy:hover {
        transform: scale(1.05);
    }

    /* SHIMMER EFFECT */
    .btn-buy::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        transition: 0.5s;
    }

    .btn-buy:hover::before {
        left: 100%;
    }

    .img-fluid.ad-img {
        height: 337px !important;
        width: 100% !important;
    }

    .card-img {
        height: 300px;
    }

    .slider {
        /* border-radius: 15px; */
        overflow: hidden;
    }

    .slider-img {
        height: 300px;
        object-fit: cover;
    }

    /* Optional: smooth shadow */
    .slider {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }
</style>
<div class="container-xxl mb-3">

    <!-- Page Title -->
    <div class="row align-items-center justify-content-between mb-4">
        <div class="col-auto">
            <h5 class="fw-semibold">Registration Link</h5>
        </div>
    </div>

    {{-- @if(auth()->check() && auth()->user()->is_activate_purchase == 1) --}}
    <!-- Center Card -->
    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-9 col-12">

            <div class="card shadow-sm border-0 registration-card p-3">
                <div class="card-body p-4 text-center">

                    <!-- Title -->
                    <h4 class="fw-bold mb-2">Registration Link – OMIGA VIP</h4>

                    <!-- Subtitle -->
                    <p class="text-white mb-3">
                        Invite your friends and grow your network. Share your unique referral link and start earning rewards instantly.
                    </p>

                    <!-- Info Box -->
                    <div class="info-box mb-4 text-start">
                        <ul class="mb-0">
                            <li class="text-white">✔️ Earn commission on every successful signup</li>
                            <li class="text-white">✔️ Track your referrals in real-time</li>
                            <li class="text-white">✔️ Unlimited sharing supported</li>
                        </ul>
                    </div>

                    <!-- Referral Section -->
                    <div class="text-start mb-3">
                        <label class="form-label fw-semibold mb-2">
                            Your Referral Link
                        </label>

                        <div class="referral-wrapper d-flex align-items-center justify-content-between">

                            <span id="referralText">
                                {{$referralLink}}
                            </span>

                            <button type="button" class="copy-btn btn btn-primary" onclick="copyReferral(this)">
                                Copy Link
                            </button>

                        </div>
                    </div>

                    <!-- Tips -->
                    <div class="tips-box text-start mb-4">
                        <small>
                            💡 Tip: Share this link on WhatsApp, Telegram, or social media to maximize your reach.
                        </small>
                    </div>

                    <!-- Share Section -->
                    <div class="mt-3 text-center">

                        <p class="mb-2" style="color:#efbf04;">Quick Share</p>

                        <div class="d-flex justify-content-center gap-3 flex-wrap">

                            <!-- WhatsApp -->
                            <a href="https://wa.me/?text={{ urlencode($referralLink) }}" target="_blank"
                                class="share-pill whatsapp">
                                <i class="ti tabler-brand-whatsapp text-white"></i>
                                <span class="text-white">WhatsApp</span>
                            </a>

                            <!-- Telegram -->
                            <a href="https://t.me/share/url?url={{ urlencode($referralLink) }}" target="_blank"
                                class="share-pill telegram">
                                <i class="ti tabler-brand-telegram text-white"></i>
                                <span class="text-white">Telegram</span>
                            </a>

                        </div>
                    </div>



                </div>
            </div>

        </div>
    </div>


{{-- 
    @else
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="package-card">
                <div class="card-glow"></div>
                <section class="coin-wrapper d-flex justify-content-center align-items-center h-auto d-lg-none">
                    <div class="text-center">
                        <img src="{{ asset('assets/logo.png') }}" height="100px" class="coin-img coin" alt="Coin">
                    </div>
                </section>
                <div class="card-body text-center">
                    <h4 class="package-title">To Activate Referral Link </h4>
                    <p>Purchase a pack and Get Activated</p>
                    <ul class="package-features">
                        <li>✔ To Refer a user</li>
                        <li>✔ Priority Support</li>
                        <li>✔ High Benefits</li>
                    </ul>

                    <!-- ATTENTION FINGER -->
                    <div class="finger-wrapper">
                        <div class="finger">👇</div>
                    </div>

                    <a href="{{ route('user.purchase_card') }}"> <button class="btn btn-buy text-white">
                            Activate Now
                        </button></a>
                </div>
            </div>

        </div>
    </div>

    @endif --}}

</div>

<script>
    function copyReferral(button) {

        const text = document.getElementById("referralText").innerText;

        // ✅ Works only in HTTPS
        if (navigator.clipboard && window.isSecureContext) {

            navigator.clipboard.writeText(text).then(() => {
                showCopied(button);
            }).catch(err => {
                console.error("Clipboard failed", err);
            });

        } else {
            // ✅ Fallback for HTTP (Your Case)
            const textArea = document.createElement("textarea");
            textArea.value = text;
            textArea.style.position = "fixed";
            textArea.style.left = "-999999px";
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();

            try {
                document.execCommand("copy");
                showCopied(button);
            } catch (err) {
                console.error("Fallback copy failed", err);
            }

            document.body.removeChild(textArea);
        }
    }

    function showCopied(button) {
        const original = button.innerText;
        button.innerText = "Copied!";
        button.disabled = true;

        setTimeout(() => {
            button.innerText = original;
            button.disabled = false;
        }, 1500);
    }
</script>

@endsection