@extends('User.layout')

@section('content')
@section('navlink')
    <a href="{{ route('user.dashboard') }}" class="link-secondary text-decoration-none">Home</a>
    <span class="mx-1">/</span>
    <span>Refer</span>
@endsection

<style>
    .refer-page {
        color: var(--parchment, #f6f1e4);
    }

    .refer-card {
        background: linear-gradient(145deg, #1c1710, #100d08);
        border: 1px solid rgba(201, 154, 59, .22);
        border-radius: 16px;
        padding: 24px;
        height: 100%;
    }

    .refer-hero {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 90% 10%, rgba(201, 154, 59, .2), transparent 35%),
            linear-gradient(120deg, #262015, #100d08);
        border: 1px solid rgba(201, 154, 59, .4);
        border-radius: 18px;
        padding: 30px;
    }

    .refer-hero h2 {
        color: var(--gold-hi, #e4be63);
        font-weight: 700;
    }

    .refer-hero p {
        color: #b7ad9b;
    }

    .refer-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 13px;
        background: rgba(201, 154, 59, .12);
        border: 1px solid rgba(201, 154, 59, .25);
        color: var(--gold-hi, #e4be63);
        font-size: 23px;
    }

    .refer-label {
        color: #a99e88;
        font-size: 13px;
    }

    .refer-value {
        color: var(--parchment, #f6f1e4);
        font-size: 25px;
        font-weight: 700;
    }

    .refer-input {
        background: #100d08;
        color: var(--parchment, #f6f1e4);
        border: 1px solid #453923;
        border-radius: 10px;
        min-width: 0;
        padding: 12px 14px;
    }

    .refer-input:focus {
        background: #100d08;
        color: var(--parchment, #f6f1e4);
        border-color: var(--gold, #c99a3b);
        box-shadow: 0 0 0 3px rgba(201, 154, 59, .12);
    }

    .refer-btn {
        border: 0;
        border-radius: 10px;
        padding: 11px 17px;
        background: linear-gradient(135deg, #e4be63, #bd8b2d);
        color: #1b1408;
        font-weight: 700;
        white-space: nowrap;
        transition: .2s ease;
    }

    .refer-btn:hover {
        background: linear-gradient(135deg, #f2d58d, #d2a344);
        color: #100d08;
        transform: translateY(-1px);
    }

    .refer-outline-btn {
        border: 1px solid rgba(201, 154, 59, .4);
        color: var(--gold-hi, #e4be63);
        background: rgba(201, 154, 59, .07);
        border-radius: 10px;
        padding: 10px 16px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        transition: .2s ease;
    }

    .refer-outline-btn:hover {
        background: rgba(201, 154, 59, .16);
        color: #fff0b2;
        border-color: var(--gold, #c99a3b);
    }

    .refer-table-wrap {
        overflow-x: auto;
    }

    .refer-table {
        width: 100%;
        min-width: 600px;
        margin: 0;
        color: var(--parchment, #f6f1e4);
        vertical-align: middle;
    }

    .refer-table thead th {
        color: #a99e88;
        background: rgba(201, 154, 59, .06);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .6px;
        font-weight: 600;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(201, 154, 59, .2);
        white-space: nowrap;
    }

    .refer-table tbody td {
        padding: 15px 16px;
        border-bottom: 1px solid rgba(201, 154, 59, .1);
        font-size: 13px;
        white-space: nowrap;
    }

    .refer-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .refer-status {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
    }

    .status-active {
        color: #65dca1;
        background: rgba(67, 201, 139, .12);
    }

    .status-pending {
        color: #e4be63;
        background: rgba(201, 154, 59, .12);
    }

    .share-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid rgba(201, 154, 59, .3);
        border-radius: 10px;
        padding: 10px 15px;
        color: var(--champagne, #e9d9af);
        background: rgba(201, 154, 59, .06);
        font-size: 13px;
        text-decoration: none;
        transition: .2s ease;
    }

    .share-btn i {
        font-size: 17px;
    }

    .share-btn:hover {
        border-color: var(--gold, #c99a3b);
        color: var(--gold-hi, #e4be63);
        background: rgba(201, 154, 59, .13);
    }

    .refer-empty {
        text-align: center;
        color: #a99e88;
        padding: 35px 15px !important;
    }

    @media(max-width: 576px) {
        .refer-hero {
            padding: 22px 18px;
        }

        .refer-card {
            padding: 18px;
        }

        .refer-value {
            font-size: 22px;
        }

        .refer-hero h2 {
            font-size: 21px;
        }

        .refer-copy-row {
            flex-direction: column;
        }

        .refer-copy-row .refer-btn {
            width: 100%;
        }

        .share-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .share-btn {
            justify-content: center;
            padding: 10px 8px;
        }
    }
</style>

<div class="refer-page">

    <!-- Page heading -->
    <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
        <div>
            <h1 class="h3 mb-1">Refer & Earn</h1>

        </div>
    </div>

    <!-- Referral banner -->
    <div class="refer-hero card-animated-border mb-4">
        <div class="row align-items-center g-4">
            <div class="col-lg-8">


                <h2 class="h3 mb-2">Invite Friends. Grow Together.</h2>
                <p class="mb-0">
                    Share your referral link with friends. When they join using
                    your link, they become part of your referral network.
                </p>
            </div>


        </div>
    </div>

    @php
        $referralCode = $referralCode ?? 'YOURCODE';
        $referralLink = $referralLink ?? url('/register') . '?ref=' . $referralCode;
    @endphp

    <!-- Referral link and code -->
    <div class="row g-4 mb-4">

        <div class="col-lg-7">
            <div class="refer-card card-animated-border">
                <div class="d-flex align-items-center gap-3 mb-3">
                    <div class="refer-icon">
                        <i class="ti ti-link"></i>
                    </div>
                    <div>
                        <h5 class="mb-1">Your Referral Link</h5>
                        <p class="refer-label mb-0">
                            Share this link with your friends
                        </p>
                    </div>
                </div>

                <div class="d-flex gap-2 refer-copy-row">
                    <input type="text" class="form-control refer-input" id="referralLink" value="{{ $referralLink }}"
                        readonly>

                    <button type="button" class="refer-btn" onclick="copyReferralLink()">
                        <i class="ti ti-copy me-1"></i> Copy Link
                    </button>
                </div>

                <div id="copyMessage" class="small mt-2" style="color: #65dca1; display:none;">
                    <i class="ti ti-circle-check me-1"></i>
                    Referral link copied!
                </div>

                <hr style="border-color: rgba(201,154,59,.2); margin: 22px 0;">

                <label class="refer-label mb-2">Your Referral Code</label>

                <div class="d-flex align-items-center justify-content-between gap-2">
                    <div class="refer-value" id="referralCode">
                        {{ $referralCode }}
                    </div>

                    <button type="button" class="refer-outline-btn" onclick="copyReferralCode()">
                        <i class="ti ti-copy"></i>
                        Copy Code
                    </button>
                </div>
            </div>
        </div>

        <!-- Share options -->
        <div class="col-lg-5">
            <div class="refer-card card-animated-border">
                <h5 class="mb-3">Share Your Link</h5>
                <p class="refer-label mb-3">
                    Invite your friends through your favorite platform.
                </p>

                <div class="share-actions d-flex flex-wrap gap-2">
                    <a href="https://wa.me/?text={{ urlencode('Join using my referral link: ' . $referralLink) }}"
                        target="_blank" rel="noopener" class="share-btn">
                        <i class="ti ti-brand-whatsapp"></i>
                        WhatsApp
                    </a>

                    <a href="https://t.me/share/url?url={{ urlencode($referralLink) }}&text={{ urlencode('Join using my referral link') }}"
                        target="_blank" rel="noopener" class="share-btn">
                        <i class="ti ti-brand-telegram"></i>
                        Telegram
                    </a>

                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($referralLink) }}"
                        target="_blank" rel="noopener" class="share-btn">
                        <i class="ti ti-brand-facebook"></i>
                        Facebook
                    </a>

                    <button type="button" class="share-btn" onclick="shareReferralLink()">
                        <i class="ti ti-share"></i>
                        More
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Referral statistics -->
    <div class="row g-3 mb-4">

        <div class="col-12 col-xl-3">
            <div class="refer-card card-animated-border">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="refer-label">Total Referrals</span>
                    <div class="refer-icon">
                        <i class="ti ti-users"></i>
                    </div>
                </div>
                <div class="refer-value">{{ $totalReferrals ?? 0 }}</div>
                <small class="refer-label">People invited</small>
            </div>
        </div>

        <div class="col-12 col-xl-3">
            <div class="refer-card card-animated-border">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="refer-label">Active Referrals</span>
                    <div class="refer-icon">
                        <i class="ti ti-user-check"></i>
                    </div>
                </div>
                <div class="refer-value">{{ $activeReferrals ?? 0 }}</div>
                <small class="refer-label">Successfully joined</small>
            </div>
        </div>

        <div class="col-12 col-xl-3">
            <div class="refer-card card-animated-border">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="refer-label">Pending Referrals</span>
                    <div class="refer-icon">
                        <i class="ti ti-hourglass"></i>
                    </div>
                </div>
                <div class="refer-value">{{ $pendingReferrals ?? 0 }}</div>
                <small class="refer-label">Awaiting activation</small>
            </div>
        </div>

        <div class="col-12 col-xl-3">
            <div class="refer-card card-animated-border">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="refer-label">Referral Earnings</span>
                    <div class="refer-icon">
                        <i class="ti ti-wallet"></i>
                    </div>
                </div>
                <div class="refer-value">
                    ₹{{ number_format($referralEarnings ?? 0, 2) }}
                </div>
                <small class="refer-label">Total earned</small>
            </div>
        </div>
    </div>

    <!-- Referral table -->
    <div class="refer-card card-animated-border">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
            <div>
                <h5 class="mb-1">My Referrals</h5>
                <p class="refer-label mb-0">
                    People who registered using your referral link
                </p>
            </div>
        </div>

        <div class="refer-table-wrap">
            <table class="refer-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>User ID</th>
                        <th>Name</th>
                        <th>Joined Date</th>
                        <th>Status</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse(($referrals ?? collect()) as $index => $referral)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $referral->user_id ?? $referral->id }}</td>
                            <td>{{ $referral->name }}</td>
                            <td>
                                {{ optional($referral->created_at)->format('d M Y') ?? '-' }}
                            </td>
                            <td>
                                @if (($referral->status ?? '') === 'Active')
                                    <span class="refer-status status-active">Active</span>
                                @else
                                    <span class="refer-status status-pending">
                                        {{ $referral->status ?? 'Pending' }}
                                    </span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="refer-empty">
                                <i class="ti ti-users fs-2 d-block mb-2"></i>
                                No referrals found yet.
                                <div class="small mt-1">
                                    Share your referral link to invite friends.
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    function copyText(text) {
        if (navigator.clipboard && window.isSecureContext) {
            return navigator.clipboard.writeText(text);
        }

        return new Promise((resolve, reject) => {
            const input = document.createElement("textarea");
            input.value = text;
            input.style.position = "fixed";
            input.style.opacity = "0";
            document.body.appendChild(input);
            input.select();

            const success = document.execCommand("copy");
            input.remove();

            success ? resolve() : reject();
        });
    }

    function copyReferralLink() {
        const link = document.getElementById("referralLink").value;

        copyText(link).then(() => {
            const message = document.getElementById("copyMessage");
            message.style.display = "block";

            setTimeout(() => {
                message.style.display = "none";
            }, 2500);
        }).catch(() => alert("Unable to copy referral link."));
    }

    function copyReferralCode() {
        const code = document.getElementById("referralCode").textContent.trim();

        copyText(code)
            .then(() => alert("Referral code copied!"))
            .catch(() => alert("Unable to copy referral code."));
    }

    function shareReferralLink() {
        const link = document.getElementById("referralLink").value;

        if (navigator.share) {
            navigator.share({
                title: "Join using my referral link",
                text: "Join using my referral link",
                url: link
            }).catch(() => {});
        } else {
            copyReferralLink();
        }
    }
</script>
@endsection