@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;
        }
    }

    .dt-length label {
        display: none !important;
    }
</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" id="copyCodeBtn" onclick="copyReferralCode()">
                        <i class="ti ti-copy"></i>
                        <span>Copy Code</span>
                    </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="row g-3 mb-4">

            <div class="col-12 col-md-6">
                <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 }}
                    </div>

                    <small class="refer-label">
                        People invited
                    </small>
                </div>
            </div>

            <div class="col-12 col-md-6">
                <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 }}
                    </div>

                    <small class="refer-label">
                        Successfully joined
                    </small>
                </div>
            </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">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">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" id="referralTable">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>User ID</th>
                        <th>Name</th>
                        <th>Joined Date</th>
                        <th>Status</th>
                    </tr>
                </thead>

                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>

<script>
    $(document).ready(function() {

        $('#referralTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('user.referral_data') }}",

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'user_id',
                    name: 'user_id'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'status',
                    name: 'is_active',
                    orderable: false,
                    searchable: false
                }
            ]
        });

    });


    function copyText(text) {

        if (navigator.clipboard && window.isSecureContext) {
            return navigator.clipboard.writeText(text);
        }

        return new Promise(function(resolve, reject) {

            const input = document.createElement('textarea');

            input.value = text;
            input.style.position = 'fixed';
            input.style.opacity = '0';

            document.body.appendChild(input);

            input.focus();
            input.select();

            const success = document.execCommand('copy');

            document.body.removeChild(input);

            if (success) {
                resolve();
            } else {
                reject();
            }

        });
    }


    function copyReferralLink() {

        const element = document.getElementById('referralLink');

        if (!element) {
            return;
        }

        const link = element.value;

        copyText(link)
            .then(function() {

                const message = document.getElementById('copyMessage');

                if (message) {
                    message.style.display = 'block';

                    setTimeout(function() {
                        message.style.display = 'none';
                    }, 2500);
                }

            })
            .catch(function() {
                alert('Unable to copy referral link.');
            });
    }


    function copyReferralCode() {

        const codeElement = document.getElementById('referralCode');
        const button = document.getElementById('copyCodeBtn');

        if (!codeElement || !button) {
            return;
        }

        const code = codeElement.textContent.trim();

        if (!code) {
            return;
        }

        const originalHtml = button.innerHTML;

        button.disabled = true;
        button.innerHTML = '<i class="ti ti-loader-2"></i> Copying...';

        copyText(code)
            .then(function() {

                button.innerHTML = '<i class="ti ti-check"></i> Copied!';

                setTimeout(function() {
                    button.innerHTML = originalHtml;
                    button.disabled = false;
                }, 2000);

            })
            .catch(function() {

                button.innerHTML =
                    '<i class="ti ti-alert-circle"></i> Failed';

                setTimeout(function() {
                    button.innerHTML = originalHtml;
                    button.disabled = false;
                }, 2000);
            });
    }


    function shareReferralLink() {

        const element = document.getElementById('referralLink');

        if (!element) {
            return;
        }

        const link = element.value;

        if (navigator.share) {

            navigator.share({
                title: 'Join using my referral link',
                text: 'Join using my referral link',
                url: link
            }).catch(function() {});

        } else {

            copyReferralLink();

        }
    }
</script>
@endsection