@extends('User.layout')
<style>
    /* Card Background */
    .referral-card {
        background: linear-gradient(135deg, #0a1f44, #0d2c63);
        border-radius: 6px !important;
        color: #fff;
    }

    /* Gold Text */
    .text-gold {
        color: #d4af37;
    }

    /* Input Styling */
    .referral-input {
        background-color: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(212, 175, 55, 0.4);
        color: #fff;
        border-radius: 8px;
        height: 45px;
    }

    .referral-input:focus {
        border-color: #d4af37;
        box-shadow: 0 0 0 0.15rem rgba(212, 175, 55, 0.25);
        background-color: rgba(255, 255, 255, 0.12);
    }

    /* Gold Button */
    .btn-gold {
        background: linear-gradient(135deg, #d4af37, #b8962e);
        color: #ffffff !important;
        border: none;
        font-weight: 600;
        border-radius: 6px;
        padding: 4px 10px;
    }

    .btn-gold:hover {
        background: linear-gradient(135deg, #e6c65c, #c9a93a);
        color: #000;
    }

    /* Label */
    .form-label {
        margin-bottom: 6px;
    }
</style>
<!--
<style>
    .input-group {
        position: relative;
        width: 100%;
    }

    .input-group input {
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        padding: 16px 120px 16px 14px;
        border-radius: 8px !important;

    }


    button#sendOtpBtn {
        z-index: 10;
    }

    .input-group .send-otp {
        position: absolute;
        right: 6px;
        top: 6px;
        bottom: 6px;
        padding: 0 16px;
        color: #fff;
        border: none;
        border-radius: 8px !important;
        font-size: 16px;
        font-family: "DM Sans";
        font-weight: 400;
        cursor: pointer;
        transition: background .2s ease;
    }
</style> -->

<style>
    .toast-container-custom {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
    }

    /* Base Toast */
    .custom-toast {
        display: flex;
        align-items: center;
        gap: 15px;
        min-width: 300px;
        max-width: 380px;
        padding: 16px 18px;
        border-radius: 14px;
        color: #fff;
        font-family: 'Segoe UI', sans-serif;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;

        animation: slideIn 0.5s ease, fadeOut 0.5s ease 3s forwards;
    }

    /* Success Theme */
    .toast-success {
        background: linear-gradient(135deg, #00c853, #43a047);
    }

    /* Error Theme */
    .toast-error {
        background: linear-gradient(135deg, #ff5252, #d32f2f);
    }

    /* Icon */
    .toast-icon {
        font-size: 22px;
        font-weight: bold;
    }

    /* Content */
    .toast-content {
        flex: 1;
    }

    .toast-title {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 2px;
    }

    .toast-message {
        font-size: 13px;
        opacity: 0.9;
    }

    /* Close Button */
    .toast-close {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

    /* Progress Bar */
    .toast-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        width: 100%;
        background: rgba(255, 255, 255, 0.6);
        animation: progressBar 3s linear forwards;
    }

    /* Animations */
    @keyframes slideIn {
        from {
            transform: translateX(120%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        to {
            opacity: 0;
            transform: translateX(120%);
        }
    }

    @keyframes progressBar {
        from {
            width: 100%;
        }

        to {
            width: 0%;
        }
    }

    .form-control {
        color: #ffd700 !important;
    }
</style>


<style>
    :root {
        --coin-size: 100px;
        /* Size of the coin */
        --spin-duration: 6s;
        /* Total duration of the spinning */
        --spin-count: 5;
        /* Number of spins at the start */
        --pause-duration: 2s;
        /* Pause duration before restarting */
        --coin-color-light: #ffd700;
        /* Light gold color */
        --coin-color-dark: #daa520;
        /* Dark gold color */
    }

    section {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }



    .coin {
        /* width: var(--coin-size);
            height: var(--coin-size);
            border-radius: 50%;
            margin: 50px auto; */
        animation: spin calc(var(--spin-duration) + var(--pause-duration)) cubic-bezier(0.1, 0.7, 0.1, 1) infinite;
        /* transform-style: preserve-3d;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), inset 0 2px 6px rgba(0, 0, 0, 0.5);
            background: radial-gradient(circle,
                    var(--coin-color-light),
                    var(--coin-color-dark)); */
    }

    /* Apply image if a coin image is set */
    .coin img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: none;
    }

    .coin.has-image {
        background: none;
        /* Remove gradient background */
        box-shadow: none;
        /* Optional: remove shadow for image */
    }

    .coin.has-image img {
        display: block;
        /* Show image when using an image coin */
    }

    @keyframes spin {
        0% {
            transform: rotateY(0deg);
        }

        80% {
            transform: rotateY(calc(360deg * var(--spin-count)));
            /* Spins quickly and slows down */
        }

        100% {
            transform: rotateY(calc(360deg * var(--spin-count)));
            /* Holds the position */
        }
    }

    .coin-wrapper {
        min-height: 184px !important;
        background: linear-gradient(135deg, #0a1f44, #0d2c63);
        border-radius: 16px;
        padding: 20px;
    }

    /* Card Style */
    .coin-card {
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 25px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }

    /* Hover effect */
    .coin-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

    /* Coin image */
    .coin-img {
        height: 100px;
        width: auto;
        transition: transform 0.3s ease;
    }

    /* Slight zoom on hover */
    .coin-card:hover .coin-img {
        transform: scale(1.1);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .coin-wrapper {
            padding: 15px;
        }

        .coin-card {
            padding: 20px;
        }

        .coin-img {
            height: 80px;
        }
    }
</style>


<style>
    /* CARD BASE */
    .package-card {
        position: relative;
        background: linear-gradient(135deg, #0a1f44, #0d2c63);
        border-radius: 15px;
        padding: 25px;
        color: #fff;
        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);
    }

    /* GLOW ANIMATION */
    .card-glow {
        position: absolute;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(212, 175, 55, 0.15), transparent 60%);
        top: -50%;
        left: -50%;
        animation: rotateGlow 8s linear infinite;
    }

    @keyframes rotateGlow {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* 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>

@section('content')
<h5>

    Registration Link
</h5>
<div class="toast-container-custom" id="toastContainer"></div>
@if(auth()->user()->active_package == 1)

<div class="row p-0">
    <div class="col-lg-7 mb-3">
        <div class="card referral-card border-0 shadow-lg d-flex justify-content-center">
            <div class="card-body p-4 mb-2 text-center">

                <h4 class="fw-bold mb-2 text-gold">
                    🚀 Invite & Earn Rewards
                </h4>

                <h6 class="fw-semibold mb-3 text-light">
                    Registration Link - Coin
                </h6>

                <p class="small text-light mb-3">
                    Share your referral link with friends and start earning rewards instantly.
                    Every successful signup increases your earning potential.
                </p>

                <p class="small text-warning mb-4">
                    ⚠️ Make sure your referral uses this exact link while registering.
                </p>

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

                    <div class="position-relative">
                        <input type="text" id="referralLink" class="form-control referral-input pe-5"
                            value="{{ $referralLink }}" readonly>

                        <button type="button"
                            class="btn btn-gold btn-sm position-absolute top-50 end-0 translate-middle-y me-1"
                            onclick="copyLink()">
                            Copy
                        </button>
                    </div>
                </div>

                <!-- Extra Content -->
                <div class="mt-4">
                    <div class="d-flex justify-content-between text-light small">
                        <div>
                            👥 Referrals
                            <br>
                            <strong>0</strong>
                        </div>
                        <div>
                            💰 Earnings
                            <br>
                            <strong>₹0</strong>
                        </div>
                        <div>
                            🎯 Bonus
                            <br>
                            <strong>Active</strong>
                        </div>
                    </div>
                </div>

                <p class="small text-muted mt-4 mb-0">
                    Tip: Share on WhatsApp, Telegram, or social media to get more referrals faster.
                </p>

            </div>
        </div>
    </div>
    <!-- <div class="col-lg-3">
                                                <section class="coin-wrapper d-flex justify-content-center align-items-center h-auto">
                                                    <div class="text-center">
                                                        <img src="{{ asset('assets/image/coin.png') }}" class="coin-img coin" alt="Coin">
                                                    </div>
                                                </section>
                                            </div> -->
    <div class="col-lg-5 col-md-7 h-100">
        <div class="referral-card p-2">
            <div id="goldCarousel" class="carousel slide" data-bs-ride="carousel">

                <!-- Indicators -->
                <div class="carousel-indicators">
                    @foreach($banners as $key => $banner)
                    <button type="button" data-bs-target="#goldCarousel" data-bs-slide-to="{{ $key }}"
                        class="{{ $key == 0 ? 'active' : '' }}">
                    </button>
                    @endforeach
                </div>

                <!-- Slides -->
                <div class="carousel-inner text-center">

                    @forelse($banners as $key => $banner)
                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                        <img src="{{ asset('storage/' . $banner->image) }}" class="img-fluid rounded-3 ad-img"
                            alt="Banner">
                    </div>
                    @empty
                    <!-- Fallback -->
                    <div class="carousel-item active">
                        <img src="{{ asset('assets/image/no-image.png') }}" class="img-fluid rounded-3 ad-img"
                            alt="No Banner">
                    </div>
                    @endforelse

                </div>

                <!-- Controls -->
                <button class="carousel-control-prev" type="button" data-bs-target="#goldCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>

                <button class="carousel-control-next" type="button" data-bs-target="#goldCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>

            </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/image/coin.png') }}" class="coin-img coin" alt="Coin">
                </div>
            </section>
            <div class="card-body text-center">
                <h4 class="package-title">Purchase Package</h4>
                <p>To Activate Referral Link Need To Purchase A Single Unit.</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('investment_add') }}"> <button class="btn btn-buy text-white">
                        Purchase Now
                    </button></a>
            </div>
        </div>
    </div>
</div>
@endif

<script>
    function copyLink() {
        const input = document.getElementById('referralLink');
        const text = input.value;

        // Modern clipboard API
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(text)
                .then(() => showToast('success', 'Referral link copied successfully!'))
                .catch(() => fallbackCopy(input));
        } else {
            // Fallback
            fallbackCopy(input);
        }
    }

    function fallbackCopy(input) {
        input.removeAttribute('readonly'); // required for some browsers
        input.select();
        input.setSelectionRange(0, 99999);

        try {
            document.execCommand('copy');
            showToast('success', 'Referral link copied successfully!');
        } catch (err) {
            showToast('error', 'Failed to copy link!');
        }

        input.setAttribute('readonly', true);
        input.blur();
    }
</script>

<script>
    function showToast(type = 'success', message = 'Success message') {

        let toast = document.createElement('div');
        toast.classList.add('custom-toast');

        if (type === 'success') {
            toast.classList.add('toast-success');
        } else {
            toast.classList.add('toast-error');
        }

        toast.innerHTML = `  <div class="toast-icon">
                ${type === 'success' ? '✔' : '❌'}
            </div>
            <div class="toast-content">
                <div class="toast-title">
                    ${type === 'success' ? 'Success' : 'Error'}
                </div>
                <div class="toast-message">
                    ${message}
                </div>
            </div>
            <button class="toast-close">&times;</button>
           <div class="toast-progress"></div>
              `;

        document.getElementById('toastContainer').appendChild(toast);

        // Remove on click
        toast.querySelector('.toast-close').onclick = () => {
            toast.remove();
        };

        // Auto remove after animation
        setTimeout(() => {
            toast.remove();
        }, 3500);
    }
</script>

@endsection