@extends('layouts.customer_template')

@section('title')
    Bitbance Referrals
@endsection

@section('style')
{{--    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.css"/>--}}

    <link rel="stylesheet" href="{{asset('customer/assets/css/ref.css')}}" />
    <link rel="stylesheet" href="{{asset('customer/assets/css/ref-responsive.css')}}" />

	<style>
        .levelSup {
            background: black;
            color: white;
            border-radius: 50%;
            padding: 2px 5px;
            margin: 2px;
        }

        .nav-pills .nav-link.active,
        .nav-pills .show > .nav-link {
            /*background-color: #7A5AF8 !important;*/
            background-color: #7A5AF8 !important;
        }

        {{--class="btn-main {{ request()->routeIs('customer_dashboard') ? 'active' : '' }}"--}}

    </style>
@endsection

@section('content')


    <div class="container-sm content-section">
        <div class="mx-auto">
            <div class="banner">
                <div class="banner-part-1">
                    <img src="{{asset('customer/assets/images/p1.png')}}" class="ill-1" alt="" />
                </div>
                <div class="banner-part-2">
                    <h2>Best Team Glory Ranking List</h2>
                    <a href="{{ route('team.level', ['level' => 1]) }}" class="btn-white" id="viewBtn">View</a>
                </div>
            </div>


            <div class="card-container">
                <div class="ref-card">
                    <p>Your Personal Commission</p>
                    <span id="bonus_balance">{{ round($yourCurrentBonusBalance,2) ?? 0}}</span>
                </div>

                <div class="ref-card">
                    <p>Total Team Balance</p>
                    <span id="team_balance">{{ round($level1_ref['investment'],2) ?? 0}}</span>
                </div>
                <div class="ref-card">
                    <p>Total Team Personal Commission</p>
                    <span id="team_personal_commission">{{ round(($level1_ref['total_teamBonus'] + $yourTotalCommission) ,2) ?? 0}}</span>
                </div>
                <div class="ref-card">
                    <p>Total Team Deposit </p>
                    <span id="total_deposit">{{ round($level1_ref['investment'],2) ?? 0}}</span>
                </div>
                <div class="ref-card">
                    <p>Total Team Withdraw</p>
                    <span id="total_withdraw">{{round($level1_ref['recent_bonusWithdraw'],2) ?? 0}}</span>
                </div>

                <div class="ref-card">
                    <p>Total Downline Register</p>
                    <span id="total_downline_register">{{$level1_ref['zeroDepositUsersCount'] ?? 0}}</span>
                </div>
                <div class="ref-card">
                    <p>Total Active Member</p>
                    <span id="total_active_members">{{$level1_ref['depositUsersCount'] ?? 0}}</span>
                </div>
                <div class="ref-card">
                    <p>Total Downline First Deposit Today</p>
                    <span id="first_deposit_today">{{$level1_ref['recent_investment'] ?? 0}}</span>
                </div>

                <div class="ref-card">
                    <p>Total Valid Downline</p>
                    <span id="total_downline">{{$level1_ref['count'] ?? 0}}</span>
                </div>

                <div class="ref-card">
                    <p>Level 1 Total Valid Downline</p>
                    <span id="l1_downline">{{$level1_ref['count'] ?? 0}}</span>
                </div>
                <div class="ref-card">
                    <p>Level 2 Total Valid Downline</p>
                    <span id="l2_downline">{{$level2_ref['count'] ?? 0}}</span>
                </div>
                <div class="ref-card">
                    <p>Level 3 Total Valid Downline</p>
                    <span id="l3_downline">{{$level3_ref['count'] ?? 0}}</span>
                </div>

            </div>
            <div class="banner" style="background: url({{asset('customer/assets/images/b2.jpg')}})">
                <div class="banner-part-1">
                    <img src="{{asset('customer/assets/images/p2.png')}}" class="ill-1" alt="" />
                    <div class="invite-text">
                        <span> Invite </span>
                        <span> Friends </span>
                    </div>
                </div>
                <div class="banner-part-2">
                    <div>Invitation Link</div>
                    <div style="margin-top: 8px">
                        https://bitbance.ai/register/{{auth()->user()->referral_id ?? ""}}
                    </div>
                    <div
                        class="btn-white"
                        onclick="copyToClipBoard('https://bitbance.ai/register/{{ auth()->user()->referral_id }}')"
                    >
                        Copy
                    </div>
                </div>
            </div>
            <div class="card-container">
                <div class="ref-card">
                    <p>Total Team Commission Yesterday</p>
                    <span id="l1_commission">{{ round(($level1_ref['recent_teamBonus'] + $level2_ref['recent_teamBonus'] + $yourRecentCommission),2) ?? 0 }}</span>
                </div>
                <div class="ref-card">
                    <p>Level 1 Team Commission Yesterday</p>
                    <span id="l2_commission">{{round($level1_ref['recent_teamBonus'],2) ?? 0}}</span>
                </div>
                <div class="ref-card">
                    <p>Level 2 Team Commission Yesterday</p>
                    <span id="l3_commission">{{round($level2_ref['recent_teamBonus'],2) ?? 0 }}</span>
                </div>
                <div class="ref-card">
                    <p>Level 3 Team Commission Yesterday</p>
                    <span id="l4_commission">{{ round($yourRecentCommission,2) ?? 0}}</span>
                </div>
            </div>
            <div class="tab-container">
                <button type="button" onclick="fetch_level_details(1, event)" style="color: white;" class="ref-tab levels active" id="level1">Level 1</button>
                <button type="button" onclick="fetch_level_details(2, event)" style="color: white;" class="ref-tab levels" id="level2">Level 2</button>
                <button type="button" onclick="fetch_level_details(3, event)" style="color: white;" class="ref-tab levels" id="level3">Level 3</button>
{{--                <button type="button" onclick="fetch_level_details(4, event)" style="color: white;" class="ref-tab levels" id="level4">Level 4</button>--}}
            </div>
        </div>

{{--        @include('layouts.includes.footer')--}}
    </div>

@endsection


@section('script')
{{--    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.js"></script>--}}
{{--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>--}}
    <script>

        // Clipboard copy function with improved compatibility
        function copyToClipBoard(text) {
            //alert(text);
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(text).then(() => {
                    alert("Address copied to clipboard!");
                }).catch(err => {
                    console.error("Failed to copy: ", err);
                });
            } else {
                // Fallback for older browsers
                let textarea = document.createElement("textarea");
                textarea.value = text;
                document.body.appendChild(textarea);
                textarea.select();
                try {
                    document.execCommand("copy");
                    alert("Address copied to clipboard!");
                } catch (err) {
                    console.error("Fallback failed: ", err);
                }
                document.body.removeChild(textarea);
            }
        }

        /*function copyToClipboard(text) {
            const textArea = document.createElement("textarea");
            textArea.value = text;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand("copy");
            document.body.removeChild(textArea);
            alert("link copied")
        }*/


        function toggleSidebar() {
            var sidebar = document.getElementById("sm-sidebar");
            var burgerMenu = document.querySelector(".burger-menu");

            if (sidebar.style.left === "0px") {
                sidebar.style.left = "-40%";
                burgerMenu.innerHTML = "&#9776;";
            } else {
                sidebar.style.left = "0px";
            }
        }


        function fetch_level_details(level) {
            // Only proceed if both values are valid
            if (level) {
                $('.levels').removeClass('active');
                $('#level'+level).addClass('active');
                const viewBtn = document.getElementById('viewBtn');
                viewBtn.href = `/team/${level}`;

                $.ajax({
                    url: "{{ route('fetch_level') }}",
                    type: "POST",
                    data: { level: level},
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                    },
                    beforeSend: function () {
                        //$("#old_address_div").hide();
                        //$("#new_address_div").show().html("<p>Loading...</p>");
                    },
                    success: function (response) {
                        console.log(response);

                        $("#team_balance").text(response.investment);
                        $("#team_personal_commission").text(response.total_teamBonus);
                        $("#total_deposit").text(response.recent_investment);
                        $("#total_withdraw").text(response.recent_bonusWithdraw);
                        $("#first_deposit_today").text(response.recent_investment);
                        $("#total_active_members").text(response.depositUsersCount);
                        $("#total_downline_register").text(response.zeroDepositUsersCount);
                        $("#total_downline").text(response.count);

                        /*if (response.crypto_address) {
                            $("#new_address_div").html(`
                                        <p>Address </p>
                                        <p>${response.crypto_address}</p>
                                    </div>
                                </div>
                            `);
                        }*/
                    },
                    error: function () {
                        // $("#new_address_div").hide();
                        // $("#old_address_div").show();
                    }
                });
            } else {
                // $("#new_address_div").hide();
                // $("#old_address_div").show();
            }
        }

    </script>

@endsection