@extends('layouts.admin.base')

@section('page-title')
    {{ $user->name }}
@endsection

@php
    if ($user->isDeleted()) {
        header('Location: ' . route('admin_users'));
        exit();
    }
    $plans_count = $user->plans->unique('id')->count();
    $settings = $user->settings;
    $google2fa_is_enabled = $settings->google2fa == \App\Models\UserSetting::USER_SETTING_ON ? true : false;
    $kyc_is_approved = $user->approved_kyc ? true : false;
    // $kyc_is_uploaded = $user->active_kyc ? true : false;
    $uploaded_kycs = $user->active_kycs;
@endphp

@section('content')
    <div class="modal fade" role="dialog" tabindex="-1" id="add-transaction">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h4 class="modal-title">Add Plan</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="sendmessageform" method="POST" action="{{ route('admin_create_investment') }}">
                        @csrf
                        <input type="hidden" name="user_id" value="{{ $user->id }}">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="plans">Plans</label>
                                    <select onchange="_select_payout_options(this)" id="plans" class="form-select"
                                        name="plan_id" required>

                                        <optgroup label="Preferred Plan">
                                            <option value="">- Select Plan -</option>
                                            @foreach ($plans as $plan)
                                                <option value="{{ $plan->id }}">{{ $plan->name }}
                                                    {{ formatMoney($plan->minimum_amount) }} -
                                                    {{ formatMoney($plan->maximum_amount) }} ({{ $plan->category->name }})
                                                </option>
                                            @endforeach
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <div class="form-group mb-3">
                                        @php
                                            $_options = [];
                                        @endphp
                                        <label class="form-label" for="plans">Payout Options</label>
                                        <select class="form-select" name="payout_option_id" id="payout_option_id">
                                            <option value="">- Select Payout Option -</option>
                                            @foreach ($plans as $plan)
                                                @foreach ($plan->payout_options as $option)
                                                    @php
                                                        $_options[$plan->id][] = $option;
                                                    @endphp
                                                @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-12 col-md-12 col-lg-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                <div>
                                    <label class="form-label" for="cryptoSelect">Cryptocurrency</label>
                                    <select id="cryptoSelect" name="crypto" class="form-select" onchange="calc(this)">
                                        <optgroup label="Preffered Cryptocurrency">
                                            <option value selected>- Select -</option>
                                            @foreach (CRYPTOCURRENCIES as $item)
                                                <option value="{{ $item }}">{{ $item }}</option>
                                            @endforeach
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="amount">Amount ({{ CURRENCY }})</label>
                                    <input class="form-control" type="number" name="amount" id="amount" step="0.01">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="startdate">Start Date</label>
                                    <input class="form-control" name="start_date" id="startdate" type="date" required>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <button class="btn btn-primary" type="submit">Add Plan</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" role="dialog" tabindex="-1" id="assign-downline">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h4 class="modal-title">Assign Downline</h4><button type="button" class="btn-close"
                        data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="assigndownlineform" method="POST" action="{{ route('admin_assign_downline') }}">
                        @csrf
                        <input type="hidden" name="user_id" value="{{ $user->id }}">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label" id="users" for="email">Users</label>
                                    <select class="form-control" name="downline_id" id="downline_id" required>
                                        <option value="">--Select--</option>
                                        @foreach ($users as $u)
                                            <option value="{{ $u->id }}">{{ $u->name }}
                                                ({{ $u->email }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-3"><button class="btn btn-primary" type="submit"
                                        x-bind:disabled="users == []">Assign</button></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" role="dialog" tabindex="-1" id="create-withdrawal-request">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h4 class="modal-title">Create Request</h4><button type="button" class="btn-close"
                        data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="createrequestform" method="POST" action="{{ route('admin_create_withdrawals') }}">
                        @csrf
                        <div class="row">
                            <input type="hidden" name="user_id" value="{{ $user->id }}">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="wallet">Wallet</label>
                                    <select id="wallet" name="wallet_id" class="form-select" required>
                                        <option value="">--Select--</option>
                                        @foreach ($user->wallets as $wallet)
                                            <option value="{{ $wallet->id }}">
                                                {{ $wallet->name() }} ({{ formatMoney($wallet->balance) }})
                                            </option>
                                        @endforeach

                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-3"><label class="form-label" for="wallet">Crypto Wallet</label>
                                    <select id="wallet" name="user_wallet_id" class="form-select" required>
                                        <option value="">--Select--</option>
                                        @foreach ($user->crypto_wallets as $wallet)
                                            <option value="{{ $wallet->id }}">
                                                {{ $wallet->cryptocurrency }} ({{ $wallet->address }})
                                            </option>
                                        @endforeach

                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label"for="amount">Amount</label>
                                    <input class="form-control" type="number" name="amount" id="amount" required="">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="date">Date</label>
                                    <input name="created_at" class="form-control" id="date" type="datetime-local" >
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="status">Status</label>
                                    <select class="form-select" id="status" name="status" required>
                                        <option value="{{ \App\Models\Withdrawal::status_new }}">Pending</option>
                                        <option value="{{ \App\Models\Withdrawal::status_approve }}">Completed</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <button class="btn btn-primary" type="submit">Create</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row min-vh-100">
            <div class="col-md-10 ps-4 default-bg pb-5">
                <div class="row">
                    <div class="col-md-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                        <div class="row d-flex">
                            <div class="col-md-4 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                <div class="card card-bg border-0 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                    <div class="card-body pb-4">
                                        <div class="d-flex flex-row d-flex"><img class="rounded-circle d-xxl-flex"
                                                width="90px" height="90px"
                                                src="{{ asset($user->profile_picture_path(true)) }}">
                                            <div class="my-auto ms-2" x-data="{ plans: 2, totalBalance: 200, upline: 'John Thomas' }">
                                                <h5 class="mb-0">{{ $user->name }}<svg
                                                        xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                                        viewBox="0 0 16 16" fill="currentColor"
                                                        class="bi bi-patch-check-fll ms-1 text-blue"
                                                        x-show="{{ $kyc_is_approved ? 1 : 0 }}">
                                                        <path fill-rule="evenodd"
                                                            d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zm.287 5.984a.5.5 0 0 0-.708-.708L7 8.793 5.854 7.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z">
                                                        </path>
                                                    </svg><svg xmlns="http://www.w3.org/2000/svg" width="1em"
                                                        height="1em" fill="currentColor" viewBox="0 0 16 16"
                                                        class="bi bi-patch-exclamation-fill ms-1 text-red"
                                                        x-show="{{ !$kyc_is_approved ? 1 : 0 }}">
                                                        <path
                                                            d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z">
                                                        </path>
                                                    </svg></h5>
                                                <p class="card-subtitle mb-2">{{ $user->email }}
                                                    @if(!empty($user->contact_number)) - {{ $user->contact_number }}@endif
                                                </p>
                                                <p class="card-subtitle mb-2">Joined {{ formatDate($user->created_at) }}</p>
                                                {{-- <p class="card-subtitle mb-1">Email: {{ $user->email }}</p> --}}
                                                <p class="card-subtitle mb-1">Wallet Balance:
                                                    <span>{{ formatMoney($user->wallet->balance) }}</span></p>
                                                <p class="card-subtitle mb-1">Group:
                                                    <span>{{ $user->group_user->group->name }}</span></p>
                                                <p class="card-subtitle mb-1">Token Balance:
                                                    <span>{{ formatTokn($user->tokn_wallet->balance) }}</span></p>
                                                <p class="card-subtitle mb-1">Active Plans: <span
                                                        class="{{ $plans_count > 0 ? 'text-green' : 'text-red' }}">{{ $plans_count }}</span>
                                                </p>
                                                <p class="card-subtitle mb-0">
                                                    Upline:&nbsp;<span>{{ $user->bringer ? $user->bringer->name : NOT_AVAILABLE }}</span>
                                                </p>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="mt-3">
                                                @foreach ($uploaded_kycs as $_kyc)
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" onclick="___approve_kyc({{ $_kyc->id }})" type="checkbox" id="approvekyc{{ $_kyc->id }}"
                                                            x-bind:checked="{{ $_kyc->isApproved() ? 1 : 0 }}">
                                                        <label class="form-check-label mt-2" for="approvekyc{{ $_kyc->id }}">Approve KYC {{ $loop->index + 1 }}
                                                            (<a href="{{ $_kyc->document_path() }}" target="_blank">View Document</a>)
                                                        </label>
                                                    </div>
                                                @endforeach
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" onclick="___toggle_2fa()"
                                                        @if ($google2fa_is_enabled) checked @endif type="checkbox"
                                                        id="formCheck-1">
                                                    <label class="form-check-label mt-2" for="formCheck-1">
                                                        @if ($google2fa_is_enabled)
                                                            Disable
                                                        @else
                                                            Enable
                                                        @endif 2-FA
                                                    </label>
                                                </div>
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" onclick="___toggle_account_status()"
                                                        @if ($user->isActive()) checked @endif type="checkbox"
                                                        id="formCheck-2">
                                                    <label class="form-check-label mt-2" for="formCheck-2">
                                                        @if ($user->isActive())
                                                            Disable
                                                        @else
                                                            Enable
                                                        @endif Account
                                                    </label>
                                                </div>
                                                <hr>
                                                <a class="text-decoration-none alt-btn" href="#" data-bs-target="#change_password" data-bs-toggle="modal">Change Password</a>
                                                <a class="text-decoration-none alt-btn" href="{{ route('admin_manage_user_wallet', $user->id) }}">Manage Wallets<svg
                                                    xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                                    fill="currentColor" viewBox="0 0 16 16" class="bi bi-wallet2 ms-1 mt-n1">
                                                    <path
                                                        d="M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499L12.136.326zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484L5.562 3zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z">
                                                    </path>
                                                </svg></a>
                                            </div>
                                            <hr>
                                            <div class="mt-3">
                                                <a class="text-decoration-none alt-btn-3" href="#" data-bs-target="#delete_user{{ $user->id }}" data-bs-toggle="modal">Delete Account</a>
                                                @if(!$user->isAdmin())
                                                    @canImpersonate($guard = null)
                                                        <a class="text-decoration-none alt-btn" href="{{ route('impersonate', $user->id) }}">Take Over<svg
                                                            xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                                            fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right ms-1 mt-n1">
                                                            <path fill-rule="evenodd"
                                                                d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z">
                                                            </path>
                                                        </svg></a>
                                                    @endCanImpersonate
                                                @endif
                                            </div>

                                            <div class="modal fade" role="dialog" tabindex="-1" id="change_password">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <form action="{{ route('admin_change_user_password') }}" method="post">
                                                            @csrf
                                                            <input type="hidden" name="user_id" value="{{ $user->id }}">
                                                            <div class="modal-header">
                                                                <h4 class="modal-title">Password Change</h4>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div class="col-md-12">
                                                                    <div class="form-group mb-3">
                                                                        <label class="form-label" for="password">New Password</label>
                                                                        <input class="form-control" type="text" name="password" id="password" step="0.01">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-12">
                                                                    <div class="form-group mb-3">
                                                                        <label class="form-label" for="password_confirmation">Confirm New Password</label>
                                                                        <input class="form-control" type="text" name="password_confirmation" id="password_confirmation" step="0.01">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button class="btn btn-light" type="button" data-bs-dismiss="modal">Close</button>
                                                                <button class="btn btn-danger" type="submit">Change Password</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="modal fade" role="dialog" tabindex="-1" id="delete_user{{ $user->id }}">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <form action="{{ route('admin_update_user') }}" method="post">
                                                            @csrf
                                                            <input type="hidden" name="user_id"
                                                                value="{{ $user->id }}">
                                                            <input type="hidden" name="action" value="delete">
                                                            <div class="modal-header">
                                                                <h4 class="modal-title">Confirm</h4><button type="button"
                                                                    class="btn-close" data-bs-dismiss="modal"
                                                                    aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <p>Are you sure you want to delete {{ $user->name }} with
                                                                    {{ $user->investments->count() }} Investment(s)?</p>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button class="btn btn-light" type="button"
                                                                    data-bs-dismiss="modal">Close</button>
                                                                <button class="btn btn-danger"
                                                                    type="submit">Delete</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card card-bg border-0 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                    <div class="card-body">
                                        <h4 class="card-title">Referrals (<span>{{ $user->referrals->count() }}</span>)
                                        </h4>
                                        <hr>
                                        <div style="max-height: 7rem;overflow-y: scroll;">
                                            @foreach ($user->referrals as $referral)
                                                <div class="media-div mb-3">
                                                    <img class="rounded-circle img-fluid"
                                                        src="{{ $referral->referree->profile_picture_path(true) }}"
                                                        width="40px" />
                                                    <div class="media-div-body">
                                                        <h6 class="text-truncate mb-0">
                                                            <a class="referral-name" href="#">
                                                                <span>{{ $referral->referree->name }}</span>
                                                            </a>
                                                        </h6>
                                                        <p class="mb-0 amount">{{ formatMoney(0) }}</p>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div x-show="{{ $user->referrals->count() < 1 ? 1 : 0 }}">
                                            <p>No referrals yet.</p>
                                        </div>
                                        <div class="mt-4">
                                            <a class="text-decoration-none alt-btn" href="#"
                                                data-bs-target="#assign-downline" data-bs-toggle="modal">Assign
                                                Downline<svg xmlns="http://www.w3.org/2000/svg" width="1em"
                                                    height="1em" fill="currentColor" viewBox="0 0 16 16"
                                                    class="bi bi-arrow-right ms-1">
                                                    <path fill-rule="evenodd"
                                                        d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z">
                                                    </path>
                                                </svg></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                <div class="mb-3">
                                    <a class="text-decoration-none alt-btn" href="#"
                                        data-bs-target="#add-transaction" data-bs-toggle="modal">Add Plan<svg
                                            xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                            fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right ms-1 mt-n1">
                                            <path fill-rule="evenodd"
                                                d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z">
                                            </path>
                                        </svg></a>
                                    <a class="text-decoration-none alt-btn" href="#"
                                        data-bs-target="#create-withdrawal-request" data-bs-toggle="modal">Create
                                        Withrawal<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                            fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right ms-1 mt-n1">
                                            <path fill-rule="evenodd"
                                                d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z">
                                            </path>
                                        </svg></a>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                        <div class="card card-bg border-0">
                                            <div class="card-body">
                                                <h6 class="text-muted card-subtitle mb-2">Total Invested</h6>
                                                <h4 class="card-title">
                                                    {{ formatMoney($active_investments->sum('amount')) }}</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                        <div class="card card-bg border-0">
                                            <div class="card-body">
                                                <h6 class="text-muted card-subtitle mb-2"><span
                                                        style="color: rgb(108, 117, 125);">Total Withdrawn</span></h6>
                                                <h4 class="card-title">{{ formatMoney($withdrawals->sum('amount')) }}</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                        <div class="card card-bg border-0">
                                            <div class="card-body">
                                                <h6 class="text-muted card-subtitle mb-2">Total Bonus<br></h6>
                                                <h4 class="card-title">{{ formatMoney($user->bonus_wallet->balance) }}
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card card-bg border-0">
                                    <div class="card-body">
                                        <div class="table-responsive text-nowrap mt-4">
                                            <table
                                                class="table table-borderless table-bordered display responsive table-spacing2"
                                                id="table1" style="width: 100%;">
                                                <thead class="table-header">
                                                    <tr class="table-h">
                                                        <th>Plan</th>
                                                        <th>Amount</th>
                                                        <th>Profit</th>
                                                        <th>Start</th>
                                                        <th>Next Payout</th>
                                                        <th>End</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($investments->sortByDesc('start_at') as $investment)
                                                        <tr class="table-row click"
                                                            data-href="{{ route('admin_view_investment', $investment->id) }}">
                                                            <td><a
                                                                    href="{{ route('admin_view_investment', $investment->id) }}">{{ $investment->plan->name }}</a>
                                                            </td>
                                                            <td>
                                                                <p class="text-nowrap table-p">
                                                                    {{ formatMoney($investment->amount) }}</p>
                                                            </td>
                                                            <td>
                                                                <p class="text-nowrap text-truncate table-p">
                                                                    {{ $investment->isActive() ? formatMoney($investment->profit()) : NOT_AVAILABLE }}
                                                                </p>
                                                            </td>
                                                            <td>
                                                                <p class="text-nowrap table-p">
                                                                    {{ $investment->start_date($investment->payouts) }}</p>
                                                            </td>
                                                            <td>
                                                                <p class="text-nowrap table-p">
                                                                    {{ $investment->next_payout_date($investment->payouts) }}
                                                                </p>
                                                            </td>
                                                            <td>
                                                                <p class="text-nowrap table-p">
                                                                    {{ $investment->end_date($investment->payouts) }}</p>
                                                            </td>
                                                            <td><span
                                                                    class="{{ $investment->status_data()->badge }}-badge">{{ $investment->status_data()->message }}</span>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <h5>Additional Data</h5>
                        <div class="row d-flex">
                            <div class="col mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                @if(!$user->additional_info)
                                <form action="{{ route('admin_initialize_additional_data') }}" method="post">
                                    @csrf
                                    <input type="hidden" name="user_id" value="{{ $user->id }}">
                                    <button type="submit" class="btn btn-sm btn-primary">Initial Additional Data</button>
                                </form>
                                @else
                                <form action="{{ route('admin_save_additional_data') }}" method="post">
                                    @csrf
                                    <input type="hidden" name="user_id" value="{{ $user->id }}">
                                    
                                    <div>
                                        <h5>Auto Addition Referrals</h5>
                                        @foreach ($plans as $plan)
                                        <div class="row">
                                            <div class="col">
                                                <span>{{ $plan->name }}</span><br>
                                                <small>Min: {{ formatMoney($plan->minimum_amount) }}</small>, <small>Max: {{ formatMoney($plan->maximum_amount) }}</small>
                                                <input type="hidden" name="plan_ids[]" value="{{ $plan->id }}">
                                            </div>
                                            <div class="col">
                                                <div class="form-group">
                                                <input type="number" min="1" name="no_of_referrals[{{ $plan->id }}]" id="" placeholder="No of referrals" class="form-control" >
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="form-group">
                                                <input type="number" min="1" name="max_amount[{{ $plan->id }}]" id="" placeholder="Max amount, empty for plan max" class="form-control" >
                                                </div>
                                            </div>
                                        </div>
                                        <hr>
                                        @endforeach
                                    </div>
                                    <div class="d-flex justify-content-end mt-4 mb-5">
                                        <button type="submit" class="btn btn-sm btn-success">SAVE DATA</button>
                                    </div>

                                    {{-- <div class="d-flex justify-content-between mt-4 mb-3">
                                        <h5>Manual Addition Referrals</h5>
                                        <div>
                                            <button type="button" onclick="add_additional_referral()" class="btn btn-secondary btn-sm"><i class="fa fa-plus"></i> Add</button>
                                        </div>
                                    </div> --}}
                                    <div class="_referrals">
                                        @foreach ($additional_referrals as $additional_referral)
                                            <div class="form-group shadow rounded p-2">
                                            <label for="">Referral {{ $loop->index + 1 }}</label>
                                            <div class="row">
                                            <div class="col">
                                                <label for="username">User Name</label>
                                                <input disabled readonly style="text-transform: capitalize;" value="{{ $additional_referral->name }}" type="text" id="username" class="form-control" placeholder="User Name">
                                            </div>
                                            <div class="col">
                                                <label for="bonus_earned">Bonus Earned</label>
                                                <input disabled readonly type="number" id="bonus_earned" class="form-control" placeholder="Bonus Earned" value="{{ $additional_referral->referral_transaction->bonus }}">
                                            </div>
                                            <div class="col">
                                                <label for="token_earned">Token Earned</label>
                                                <input disabled readonly type="number" id="token_earned" class="form-control" placeholder="Token Earned" value="{{ $additional_referral->tokn_transaction->amount }}">
                                            </div>
                                            </div>
                                            <div class="row">
                                            <div class="col">
                                                <label for="investments">Investments ({{ $additional_referral->investments->first()->plan->name }})</label>
                                                <input disabled readonly value="{{ implode(",",$additional_referral->investments->pluck('amount')->toArray()) }}" type="text" id="investments" class="form-control" placeholder="Separate with comma e.g 1000,3000,5200">
                                            </div>
                                            </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    {{ $additional_referrals->links('pagination::bootstrap-4') }}
                                </form>
                                @endif
                            </div>
                        </div>
                        <hr>
                        <h5>Nested Referrals Network</h5>
                        <div class="row">
                            <div class="col">
                                <div class="card card-bg border-0">
                                    <div class="card-body">
                                        <!-- Visualization Controls -->
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <div class="btn-group" role="group">
                                                <button type="button" class="btn btn-outline-primary active" id="treeViewBtn">
                                                    <i class="fas fa-sitemap"></i> Tree View
                                                </button>
                                                <button type="button" class="btn btn-outline-primary" id="globeViewBtn">
                                                    <i class="fas fa-globe"></i> Globe View
                                                </button>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <label class="form-label me-2 mb-0">Show Levels:</label>
                                                <select class="form-select form-select-sm" id="levelFilter" style="width: auto;">
                                                    <option value="all">All Levels</option>
                                                    <option value="1">Level 1</option>
                                                    <option value="2">Level 2</option>
                                                    <option value="3">Level 3</option>
                                                    <option value="4">Level 4</option>
                                                    <option value="5">Level 5</option>
                                                    <option value="6">Level 6</option>
                                                    <option value="7">Level 7</option>
                                                    <option value="8">Level 8</option>
                                                    <option value="9">Level 9</option>
                                                    <option value="10">Level 10</option>
                                                </select>
                                            </div>
                                        </div>

                                        <!-- Tree Visualization Container -->
                                        <div id="treeVisualization" class="visualization-container">
                                            <!-- Hover Info Display -->
                                            <div id="hoverInfo" class="hover-info-display">
                                                <div class="hover-user-name">Hover over a node to see details</div>
                                                <div class="hover-user-details"></div>
                                            </div>
                                            <div id="treeContainer" class="tree-container"></div>
                                        </div>

                                        <!-- Globe Visualization Container -->
                                        <div id="globeVisualization" class="visualization-container" style="display: none;">
                                            <div id="globeContainer" class="globe-container"></div>
                                        </div>

                                        <!-- User Details Modal -->
                                        <div class="modal fade" id="userDetailsModal" tabindex="-1">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">User Details</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="row">
                                                            <div class="col-md-4">
                                                                <div class="text-center">
                                                                    <div class="user-avatar-large mb-3">
                                                                        <i class="fas fa-user-circle fa-4x text-primary"></i>
                                                                    </div>
                                                                    <h6 id="modalUserName" class="mb-1"></h6>
                                                                    <small class="text-muted" id="modalUserEmail"></small>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <div class="row">
                                                                    <div class="col-6">
                                                                        <div class="info-item">
                                                                            <label class="form-label text-muted small">Referral Code</label>
                                                                            <p class="mb-2" id="modalReferralCode"></p>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="info-item">
                                                                            <label class="form-label text-muted small">Level</label>
                                                                            <p class="mb-2" id="modalLevel"></p>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="info-item">
                                                                            <label class="form-label text-muted small">Join Date</label>
                                                                            <p class="mb-2" id="modalJoinDate"></p>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <div class="info-item">
                                                                            <label class="form-label text-muted small">Status</label>
                                                                            <p class="mb-2" id="modalStatus"></p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
<style>
    .visualization-container {
        height: 600px;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #54a0ff);
        background-size: 400% 400%;
        position: relative;
        overflow: hidden;
        animation: gradientShift 8s ease infinite;
    }

    @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    .visualization-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 20% 80%, rgba(255, 107, 107, 0.4) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(78, 205, 196, 0.4) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(69, 183, 209, 0.3) 0%, transparent 50%),
            radial-gradient(circle at 60% 60%, rgba(254, 202, 87, 0.3) 0%, transparent 50%),
            radial-gradient(circle at 10% 10%, rgba(255, 159, 243, 0.3) 0%, transparent 50%);
        animation: backgroundShift 6s ease-in-out infinite;
        z-index: 1;
    }

    @keyframes backgroundShift {
        0%, 100% { 
            transform: translateX(0) translateY(0) rotate(0deg) scale(1); 
            opacity: 0.8;
        }
        25% { 
            transform: translateX(-20px) translateY(-10px) rotate(2deg) scale(1.1); 
            opacity: 1;
        }
        50% { 
            transform: translateX(15px) translateY(-20px) rotate(-2deg) scale(0.9); 
            opacity: 0.9;
        }
        75% { 
            transform: translateX(-10px) translateY(15px) rotate(1deg) scale(1.05); 
            opacity: 1;
        }
    }

    .tree-container, .globe-container {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
    }

    /* Floating particles animation */
    .visualization-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            radial-gradient(3px 3px at 20px 30px, rgba(255, 107, 107, 0.8), transparent),
            radial-gradient(2px 2px at 40px 70px, rgba(78, 205, 196, 0.6), transparent),
            radial-gradient(4px 4px at 90px 40px, rgba(69, 183, 209, 0.7), transparent),
            radial-gradient(2px 2px at 130px 80px, rgba(254, 202, 87, 0.5), transparent),
            radial-gradient(3px 3px at 160px 30px, rgba(255, 159, 243, 0.6), transparent),
            radial-gradient(2px 2px at 200px 60px, rgba(84, 160, 255, 0.5), transparent),
            radial-gradient(3px 3px at 50px 120px, rgba(150, 206, 180, 0.6), transparent),
            radial-gradient(2px 2px at 180px 150px, rgba(255, 107, 107, 0.4), transparent);
        background-repeat: repeat;
        background-size: 250px 200px;
        animation: float 8s linear infinite, sparkle 3s ease-in-out infinite;
        z-index: 1;
    }

    @keyframes float {
        0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
        25% { transform: translateY(-15px) translateX(10px) rotate(90deg); }
        50% { transform: translateY(10px) translateX(-10px) rotate(180deg); }
        75% { transform: translateY(-5px) translateX(15px) rotate(270deg); }
        100% { transform: translateY(0px) translateX(0px) rotate(360deg); }
    }

    @keyframes sparkle {
        0%, 100% { opacity: 0.6; }
        50% { opacity: 1; }
    }

    /* Tree Visualization Styles */
    .node {
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .node:hover {
        transform: scale(1.1);
    }

    .node circle {
        fill: #007bff;
        stroke: #0056b3;
        stroke-width: 2px;
        transition: all 0.3s ease;
    }

    .node.level-1 circle {
        fill: #28a745;
        stroke: #1e7e34;
    }

    .node.level-2 circle {
        fill: #ffc107;
        stroke: #e0a800;
    }

    .node.level-3 circle {
        fill: #fd7e14;
        stroke: #e55a00;
    }

    .node.level-4 circle {
        fill: #dc3545;
        stroke: #c82333;
    }

    .node.level-5 circle {
        fill: #6f42c1;
        stroke: #5a2d91;
    }

    .node text {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 12px;
        font-weight: 500;
        fill: #333;
        text-anchor: middle;
        dominant-baseline: middle;
    }

    .link {
        fill: none;
        stroke: #6c757d;
        stroke-width: 2px;
        stroke-opacity: 0.6;
        transition: all 0.3s ease;
    }

    .link:hover {
        stroke: #007bff;
        stroke-width: 3px;
        stroke-opacity: 1;
    }

    /* User node styles */
    .user-node {
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .user-node:hover {
        transform: scale(1.1);
    }

    .user-node .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #007bff, #0056b3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 14px;
        border: 3px solid white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .user-node.level-1 .avatar {
        background: linear-gradient(135deg, #28a745, #1e7e34);
    }

    .user-node.level-2 .avatar {
        background: linear-gradient(135deg, #ffc107, #e0a800);
    }

    .user-node.level-3 .avatar {
        background: linear-gradient(135deg, #fd7e14, #e55a00);
    }

    .user-node.level-4 .avatar {
        background: linear-gradient(135deg, #dc3545, #c82333);
    }

    .user-node.level-5 .avatar {
        background: linear-gradient(135deg, #6f42c1, #5a2d91);
    }

    .user-name {
        font-size: 11px;
        font-weight: 500;
        color: #333;
        text-align: center;
        margin-top: 4px;
        max-width: 80px;
        word-wrap: break-word;
    }

    .user-level {
        font-size: 10px;
        color: #6c757d;
        text-align: center;
        margin-top: 2px;
    }

    /* Globe Visualization Styles */
    .globe-container {
        background: radial-gradient(circle at center, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
    }

    .globe-node {
        position: absolute;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .globe-node:hover {
        transform: scale(1.2);
    }

    /* Loading animation */
    .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #007bff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 20px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .visualization-container {
            height: 400px;
        }
        
        .user-name {
            font-size: 10px;
            max-width: 60px;
        }
    }

    /* Modal styles */
    .user-avatar-large {
        color: #007bff;
    }

    .info-item {
        margin-bottom: 15px;
    }

    .info-item label {
        font-weight: 600;
        margin-bottom: 5px;
    }

    .info-item p {
        margin: 0;
        font-weight: 500;
    }

    /* Hover Info Display */
    .hover-info-display {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(255, 255, 255, 0.95);
        padding: 12px 18px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 100;
        min-width: 250px;
        pointer-events: none;
        border-left: 4px solid #007bff;
    }

    .hover-user-name {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
    }

    .hover-user-details {
        font-size: 12px;
        color: #666;
        line-height: 1.6;
    }

    .hover-user-details div {
        margin-bottom: 2px;
    }

    .hover-info-display.active {
        border-left-color: #28a745;
    }

    /* Additional animated elements */
    .visualization-container {
        position: relative;
    }

    .visualization-container::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: 
            conic-gradient(from 0deg at 50% 50%, 
                rgba(255, 107, 107, 0.1) 0deg,
                rgba(78, 205, 196, 0.1) 60deg,
                rgba(69, 183, 209, 0.1) 120deg,
                rgba(254, 202, 87, 0.1) 180deg,
                rgba(255, 159, 243, 0.1) 240deg,
                rgba(84, 160, 255, 0.1) 300deg,
                rgba(255, 107, 107, 0.1) 360deg
            );
        animation: rotate 20s linear infinite;
        z-index: 0;
    }

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

    /* Pulsing border effect */
    .visualization-container {
        animation: pulseBorder 4s ease-in-out infinite;
    }

    @keyframes pulseBorder {
        0%, 100% { 
            box-shadow: 0 0 20px rgba(255, 107, 107, 0.3), 
                        0 0 40px rgba(78, 205, 196, 0.2),
                        0 0 60px rgba(69, 183, 209, 0.1);
        }
        50% { 
            box-shadow: 0 0 30px rgba(255, 107, 107, 0.5), 
                        0 0 60px rgba(78, 205, 196, 0.3),
                        0 0 90px rgba(69, 183, 209, 0.2);
        }
    }
</style>
@endsection

@section('scripts')
    <!-- vis.js for stable network visualization -->
    <script src="https://unpkg.com/vis-network@latest/dist/vis-network.min.js"></script>
    <!-- Three.js for 3D globe visualization -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    
    <script>
        // Referrals data from Laravel
        const referralsData = @json($referrals_with_nested);
        const currentUser = @json($user);
        
        // Build tree structure from flat data
        function buildTreeStructure(data, rootUserId) {
            const userMap = new Map();
            const root = {
                id: rootUserId,
                name: currentUser.name,
                email: currentUser.email,
                level: 0,
                children: []
            };
            userMap.set(rootUserId, root);
            
            // Add all users to map
            data.forEach(item => {
                const user = item.user;
                const level = item.level;
                
                if (!userMap.has(user.id)) {
                    userMap.set(user.id, {
                        id: user.id,
                        name: user.name,
                        email: user.email,
                        level: level,
                        referral_code: user.referral_code,
                        created_at: user.created_at,
                        status: user.status,
                        children: []
                    });
                }
            });
            
            // Build parent-child relationships
            data.forEach(item => {
                const referral = item.referral;
                const parentId = referral.user_id;
                const childId = referral.downline_id;
                
                const parent = userMap.get(parentId);
                const child = userMap.get(childId);
                
                if (parent && child) {
                    parent.children.push(child);
                }
            });
            
            return root;
        }
        
        // Initialize visualizations
        let treeVisualization, globeVisualization;
        let currentView = 'tree';
        let tooltipTimeout;
        let currentNetwork = null;
        let originalTreeData = null;
        
        // Tree visualization using vis.js
        function initTreeVisualization() {
            const container = document.getElementById('treeContainer');
            container.innerHTML = '';
            
            const treeData = buildTreeStructure(referralsData, currentUser.id);
            originalTreeData = treeData; // Store original data for filtering
            
            // Convert tree data to vis.js format
            const nodes = [];
            const edges = [];
            
            function processNode(node, parentId = null) {
                // Add node
                nodes.push({
                    id: node.id,
                    label: getThreeLetterAbbreviation(node.name),
                    title: `${node.name}\nLevel: ${node.level}\nEmail: ${node.email}`,
                    color: {
                        background: getNodeColor(node.level),
                        border: '#fff',
                        highlight: {
                            background: getNodeColor(node.level),
                            border: '#fff'
                        }
                    },
                    font: {
                        color: '#fff',
                        size: 14,
                        face: 'Arial'
                    },
                    borderWidth: 3,
                    size: 20
                });
                
                // Add edge if there's a parent
                if (parentId) {
                    edges.push({
                        from: parentId,
                        to: node.id,
                        color: { color: '#6c757d', width: 2 }
                    });
                }
                
                // Process children
                if (node.children) {
                    node.children.forEach(child => {
                        processNode(child, node.id);
                    });
                }
            }
            
            processNode(treeData);
            
            // Create the network
            const data = { nodes, edges };
            const options = {
                layout: {
                    hierarchical: {
                        direction: 'UD',
                        sortMethod: 'directed',
                        nodeSpacing: 100,
                        levelSeparation: 80
                    }
                },
                physics: {
                    enabled: false
                },
                interaction: {
                    hover: true,
                    selectConnectedEdges: false,
                    zoomView: true,
                    dragView: true
                },
                nodes: {
                    shape: 'circle',
                    size: 90,
                    font: {
                        size: 24,
                        color: '#fff',
                        face: 'Arial',
                        strokeWidth: 2,
                        strokeColor: '#000'
                    },
                    borderWidth: 4,
                    shadow: {
                        enabled: true,
                        color: 'rgba(0,0,0,0.3)',
                        size: 10,
                        x: 2,
                        y: 2
                    }
                },
                edges: {
                    smooth: {
                        type: 'continuous',
                        forceDirection: 'vertical',
                        roundness: 0.4
                    },
                    width: 4,
                    color: {
                        color: '#6c757d',
                        highlight: '#007bff',
                        hover: '#28a745'
                    },
                    shadow: {
                        enabled: true,
                        color: 'rgba(0,0,0,0.2)',
                        size: 5,
                        x: 1,
                        y: 1
                    }
                },
                configure: {
                    enabled: false
                }
            };
            
            const network = new vis.Network(container, data, options);
            currentNetwork = network; // Store network reference for filtering
            
            // Set initial zoom immediately
            setTimeout(() => {
                network.moveTo({
                    scale: 0.8,
                    animation: {
                        duration: 1000,
                        easingFunction: 'easeInOutQuad'
                    }
                });
            }, 500);
            
            // Also set zoom after stabilization
            network.on('stabilizationIterationsDone', function() {
                setTimeout(() => {
                    network.moveTo({
                        scale: 0.8,
                        animation: {
                            duration: 1000,
                            easingFunction: 'easeInOutQuad'
                        }
                    });
                }, 100);
            });
            
            // Get hover info elements
            const hoverInfo = document.getElementById('hoverInfo');
            const hoverUserName = hoverInfo.querySelector('.hover-user-name');
            const hoverUserDetails = hoverInfo.querySelector('.hover-user-details');
            
            // Handle hover events with beautiful animations
            network.on('hoverNode', function(params) {
                const nodeId = params.node;
                const nodeData = nodes.find(n => n.id == nodeId);
                if (nodeData) {
                    const userData = findUserById(nodeId);
                    if (userData) {
                        hoverUserName.textContent = userData.name;
                        hoverUserDetails.innerHTML = `
                            <div><strong>Email:</strong> ${userData.email}</div>
                            <div><strong>Level:</strong> ${userData.level}</div>
                            <div><strong>Referral Code:</strong> ${userData.referral_code || 'N/A'}</div>
                        `;
                        hoverInfo.classList.add('active');
                        
                        // Add pulsing animation to the hovered node
                        network.updateClusteredNode(nodeId, {
                            color: {
                                background: getNodeColor(userData.level),
                                border: '#fff',
                                highlight: {
                                    background: getNodeColor(userData.level),
                                    border: '#fff'
                                }
                            },
                            size: 100,
                            font: {
                                size: 28,
                                color: '#fff',
                                face: 'Arial',
                                strokeWidth: 3,
                                strokeColor: '#000'
                            }
                        });
                    }
                }
            });
            
            network.on('blurNode', function(params) {
                hoverUserName.textContent = 'Hover over a node to see details';
                hoverUserDetails.innerHTML = '';
                hoverInfo.classList.remove('active');
                
                // Reset node size
                if (params.node) {
                    const userData = findUserById(params.node);
                    if (userData) {
                        network.updateClusteredNode(params.node, {
                            size: 90,
                            font: {
                                size: 24,
                                color: '#fff',
                                face: 'Arial',
                                strokeWidth: 2,
                                strokeColor: '#000'
                            }
                        });
                    }
                }
            });
            
            // Handle click events
            network.on('click', function(params) {
                if (params.nodes.length > 0) {
                    const nodeId = params.nodes[0];
                    const userData = findUserById(nodeId);
                    if (userData) {
                        showUserDetails(userData);
                    }
                }
            });
            
            // Helper function to find user data by ID
            function findUserById(id) {
                function searchNode(node) {
                    if (node.id == id) return node;
                    if (node.children) {
                        for (let child of node.children) {
                            const result = searchNode(child);
                            if (result) return result;
                        }
                    }
                    return null;
                }
                return searchNode(treeData);
            }
        }
        
        // Globe visualization using Three.js
        function initGlobeVisualization() {
            const container = document.getElementById('globeContainer');
            container.innerHTML = '';
            
            const width = container.offsetWidth;
            const height = container.offsetHeight;
            
            // Scene setup
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
            const renderer = new THREE.WebGLRenderer({ antialias: true });
            
            renderer.setSize(width, height);
            renderer.setClearColor(0x0f0f23);
            container.appendChild(renderer.domElement);
            
            // Create Earth texture
            const earthTexture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');
            const earthNormalMap = new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg');
            const earthSpecularMap = new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg');
            
            // Globe with Earth texture
            const globeGeometry = new THREE.SphereGeometry(3, 64, 64);
            const globeMaterial = new THREE.MeshPhongMaterial({ 
                map: earthTexture,
                normalMap: earthNormalMap,
                specularMap: earthSpecularMap,
                shininess: 100,
                transparent: true,
                opacity: 0.8
            });
            const globe = new THREE.Mesh(globeGeometry, globeMaterial);
            scene.add(globe);
            
            // Lighting
            const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
            scene.add(ambientLight);
            
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(5, 5, 5);
            scene.add(directionalLight);
            
            // User nodes
            const treeData = buildTreeStructure(referralsData, currentUser.id);
            const userNodes = [];
            
            function createUserNode(user, position) {
                // Create user sphere with larger click area
                const geometry = new THREE.SphereGeometry(0.2, 16, 16);
                const material = new THREE.MeshPhongMaterial({ 
                    color: getNodeColorHex(user.level),
                    shininess: 100
                });
                const node = new THREE.Mesh(geometry, material);
                node.position.copy(position);
                node.userData = user;
                scene.add(node);
                
                // Create invisible larger sphere for better click detection
                const clickGeometry = new THREE.SphereGeometry(0.4, 16, 16);
                const clickMaterial = new THREE.MeshBasicMaterial({ 
                    transparent: true,
                    opacity: 0
                });
                const clickNode = new THREE.Mesh(clickGeometry, clickMaterial);
                clickNode.position.copy(position);
                clickNode.userData = user;
                scene.add(clickNode);
                
                // Create text sprite for user name
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.width = 128;
                canvas.height = 64;
                
                context.fillStyle = 'rgba(0, 0, 0, 0.8)';
                context.fillRect(0, 0, canvas.width, canvas.height);
                
                context.fillStyle = '#ffffff';
                context.font = 'bold 16px Arial';
                context.textAlign = 'center';
                context.textBaseline = 'middle';
                context.fillText(getThreeLetterAbbreviation(user.name), canvas.width / 2, canvas.height / 2);
                
                const texture = new THREE.CanvasTexture(canvas);
                const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
                const sprite = new THREE.Sprite(spriteMaterial);
                sprite.position.copy(position);
                sprite.position.y += 0.4;
                sprite.scale.set(0.6, 0.3, 1);
                sprite.userData = user;
                scene.add(sprite);
                
                userNodes.push(node);
                userNodes.push(clickNode);
                userNodes.push(sprite);
                return node;
            }
            
            // Position nodes on globe surface
            const rootNode = createUserNode(treeData, new THREE.Vector3(0, 3, 0));
            
            function positionChildren(parent, parentPos, level = 1) {
                if (!parent.children || parent.children.length === 0) return;
                
                const angleStep = (Math.PI * 2) / parent.children.length;
                const radius = 3.2 + level * 0.3;
                
                parent.children.forEach((child, index) => {
                    const angle = angleStep * index;
                    const x = Math.cos(angle) * radius;
                    const z = Math.sin(angle) * radius;
                    const y = Math.sin(level * 0.5) * 0.5;
                    
                    const childPos = new THREE.Vector3(x, y, z);
                    const childNode = createUserNode(child, childPos);
                    
                    // Create connection line
                    const lineGeometry = new THREE.BufferGeometry().setFromPoints([parentPos, childPos]);
                    const lineMaterial = new THREE.LineBasicMaterial({ color: 0x6c757d });
                    const line = new THREE.Line(lineGeometry, lineMaterial);
                    scene.add(line);
                    
                    // Recursively position children
                    positionChildren(child, childPos, level + 1);
                });
            }
            
            positionChildren(treeData, rootNode.position);
            
            // Controls
            const controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.05;
            
            camera.position.set(0, 0, 8);
            controls.update();
            
            // Raycasting for mouse interaction
            const raycaster = new THREE.Raycaster();
            const mouse = new THREE.Vector2();
            
            function onMouseClick(event) {
                mouse.x = (event.clientX / width) * 2 - 1;
                mouse.y = -(event.clientY / height) * 2 + 1;
                
                raycaster.setFromCamera(mouse, camera);
                const intersects = raycaster.intersectObjects(userNodes);
                
                if (intersects.length > 0) {
                    showUserDetails(intersects[0].object.userData);
                }
            }
            
            container.addEventListener('click', onMouseClick);
            
            // Animation loop
            function animate() {
                requestAnimationFrame(animate);
                
                // Rotate the globe slowly
                globe.rotation.y += 0.005;
                
                controls.update();
                renderer.render(scene, camera);
            }
            animate();
            
            // Handle resize
            window.addEventListener('resize', () => {
                const newWidth = container.offsetWidth;
                const newHeight = container.offsetHeight;
                
                camera.aspect = newWidth / newHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(newWidth, newHeight);
            });
        }
        
        // Utility functions
        function getThreeLetterAbbreviation(name) {
            if (!name) return 'UNK';
            
            // Remove extra spaces and split by space
            const words = name.trim().split(/\s+/);
            
            if (words.length === 1) {
                // Single word - take first 3 characters
                return words[0].substring(0, 3).toUpperCase();
            } else if (words.length === 2) {
                // Two words - first letter of each + first letter of first word
                return (words[0].charAt(0) + words[1].charAt(0) + words[0].charAt(1)).toUpperCase();
            } else {
                // Multiple words - first letter of first 3 words
                return words.slice(0, 3).map(word => word.charAt(0)).join('').toUpperCase();
            }
        }
        
        function getNodeColor(level) {
            const colors = {
                0: '#007bff',
                1: '#28a745',
                2: '#ffc107',
                3: '#fd7e14',
                4: '#dc3545',
                5: '#6f42c1',
                6: '#20c997',
                7: '#e83e8c',
                8: '#fd7e14',
                9: '#6f42c1',
                10: '#17a2b8'
            };
            return colors[level] || '#6c757d';
        }
        
        function getNodeColorHex(level) {
            const colors = {
                0: 0x007bff,
                1: 0x28a745,
                2: 0xffc107,
                3: 0xfd7e14,
                4: 0xdc3545,
                5: 0x6f42c1,
                6: 0x20c997,
                7: 0xe83e8c,
                8: 0xfd7e14,
                9: 0x6f42c1,
                10: 0x17a2b8
            };
            return colors[level] || 0x6c757d;
        }
        
        function showUserDetails(user) {
            document.getElementById('modalUserName').textContent = user.name;
            document.getElementById('modalUserEmail').textContent = user.email;
            document.getElementById('modalReferralCode').textContent = user.referral_code || 'N/A';
            document.getElementById('modalLevel').textContent = `Level ${user.level}`;
            document.getElementById('modalJoinDate').textContent = user.created_at ? new Date(user.created_at).toLocaleDateString() : 'N/A';
            document.getElementById('modalStatus').textContent = user.status === 1 ? 'Active' : 'Inactive';
            
            const modal = new bootstrap.Modal(document.getElementById('userDetailsModal'));
            modal.show();
        }
        
        // View switching
        function switchView(view) {
            currentView = view;
            
            if (view === 'tree') {
                document.getElementById('treeVisualization').style.display = 'block';
                document.getElementById('globeVisualization').style.display = 'none';
                document.getElementById('treeViewBtn').classList.add('active');
                document.getElementById('globeViewBtn').classList.remove('active');
                
                if (!treeVisualization) {
                    initTreeVisualization();
                    treeVisualization = true;
                }
            } else {
                document.getElementById('treeVisualization').style.display = 'none';
                document.getElementById('globeVisualization').style.display = 'block';
                document.getElementById('globeViewBtn').classList.add('active');
                document.getElementById('treeViewBtn').classList.remove('active');
                
                if (!globeVisualization) {
                    initGlobeVisualization();
                    globeVisualization = true;
                }
            }
        }
        
        // Level filter functionality
        function filterByLevel(level) {
            if (!currentNetwork || !originalTreeData) return;
            
            const nodes = [];
            const edges = [];
            
            function processNode(node, parentId = null, maxLevel = null) {
                // Skip if level is beyond filter
                if (maxLevel !== null && node.level > maxLevel) return;
                
                // Add node
                nodes.push({
                    id: node.id,
                    label: getThreeLetterAbbreviation(node.name),
                    title: `${node.name}\nLevel: ${node.level}\nEmail: ${node.email}`,
                    color: {
                        background: getNodeColor(node.level),
                        border: '#fff',
                        highlight: {
                            background: getNodeColor(node.level),
                            border: '#fff'
                        }
                    },
                    font: {
                        color: '#fff',
                        size: 24,
                        face: 'Arial',
                        strokeWidth: 2,
                        strokeColor: '#000'
                    },
                    borderWidth: 4,
                    size: 90,
                    shadow: {
                        enabled: true,
                        color: 'rgba(0,0,0,0.3)',
                        size: 10,
                        x: 2,
                        y: 2
                    }
                });
                
                // Add edge if there's a parent
                if (parentId) {
                    edges.push({
                        from: parentId,
                        to: node.id,
                        color: { color: '#6c757d', width: 2 },
                        width: 4,
                        color: {
                            color: '#6c757d',
                            highlight: '#007bff',
                            hover: '#28a745'
                        },
                        shadow: {
                            enabled: true,
                            color: 'rgba(0,0,0,0.2)',
                            size: 5,
                            x: 1,
                            y: 1
                        }
                    });
                }
                
                // Process children
                if (node.children) {
                    node.children.forEach(child => {
                        processNode(child, node.id, maxLevel);
                    });
                }
            }
            
            const maxLevel = level === 'all' ? null : parseInt(level);
            processNode(originalTreeData, null, maxLevel);
            
            // Update network with filtered data
            const data = { nodes, edges };
            currentNetwork.setData(data);
            
            // Re-apply zoom
            setTimeout(() => {
                currentNetwork.moveTo({
                    scale: 0.8,
                    animation: {
                        duration: 1000,
                        easingFunction: 'easeInOutQuad'
                    }
                });
            }, 100);
        }
        
        // Event listeners
        document.getElementById('treeViewBtn').addEventListener('click', () => switchView('tree'));
        document.getElementById('globeViewBtn').addEventListener('click', () => switchView('globe'));
        document.getElementById('levelFilter').addEventListener('change', function() {
            filterByLevel(this.value);
        });
        
        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize tree view by default
            initTreeVisualization();
            treeVisualization = true;
        });
    </script>
    
    <script>
        var additional_user_id = 1;
        function add_additional_referral() {
            const randomLetter = _ => String.fromCharCode(0|Math.random()*26+97)
            var els = '';
            els += '<div class="form-group shadow rounded p-2">';
            els += '<label for="">Referral '+additional_user_id+'</label>';
            els += '<div class="row">';
            els += '<div class="col">';
            els += '    <label for="username">User Name</label>';
            els += '    <input required style="text-transform: capitalize;" value="'+randomLetter()+'******" type="text" name="username['+additional_user_id+']" id="username" class="form-control" placeholder="User Name">';
            els += '</div>';
            els += '<div class="col">';
            els += '    <label for="bonus_earned">Bonus Earned</label>';
            els += '    <input required type="number" name="bonus_earned['+additional_user_id+']" id="bonus_earned" class="form-control" placeholder="Bonus Earned" value="20">';
            els += '</div>';
            els += '<div class="col">';
            els += '    <label for="token_earned">Token Earned</label>';
            els += '    <input required type="number" name="tokn_earned['+additional_user_id+']" id="token_earned" class="form-control" placeholder="Token Earned" value="10">';
            els += '</div>';
            els += '</div>';
            els += '<div class="row">';
            els += '<div class="col">';
            els += '    <label for="investments">Investments</label>';
            els += '    <input required type="text" name="investments['+additional_user_id+']" id="investments" class="form-control" placeholder="Separate with comma e.g 1000,3000,5200">';
            els += '</div>';
            els += '</div>';
            els += '</div>';
            $('._referrals').append(els);

            additional_user_id += 1;
        }
        $(document).ready(function() {
            $("#downline_id").selectize();
            @if($additional_referrals->count() == 0)
            // add_additional_referral();
            @endif
        });


        function ___toggle_2fa() {
            $.ajax({
                url: "{{ route('admin_toggle_2fa') }}",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "user_id": "{{ $user->id }}"
                },
                success: function(response) {
                    console.log(response)
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        };

        function ___approve_kyc(id) {
            $.ajax({
                url: "{{ route('admin_approve_kyc') }}",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "user_id": "{{ $user->id }}",
                    "kyc_id": id
                },
                success: function(response) {
                    console.log(response)
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        };


        function ___toggle_account_status() {
            $.ajax({
                url: "{{ route('admin_disable_account') }}",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "user_id": "{{ $user->id }}"
                },
                success: function(response) {
                    console.log(response)
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        };

        function _select_payout_options(el) {
            var selected = $(el).val()
            var options = {!! json_encode($_options) !!}
            var ops = options[selected]
            var html_options = ''
            ops.forEach(element => {
                html_options += '<option value="' + element.id + '">' + element.name + '</option>'
            });
            $('#payout_option_id').html(html_options)
        }

        function initialize_additional_data() {
            fetch('https://prplife.com/wp-json/wp/v2/posts')
                .then(response => response.json())
                .then(data => {
                    this.news = data;
                    console.log(this.news)
                }).catch(error => {
                    console.log(error);
                });
        }

        function init() {
            return {}
        }
    </script>
@endsection