@extends('templates.' . site('template') . '.layouts.user')

@section('contents')
    <div class="transition-all duration-300 ease-in-out"
        :class="{
            'lg:ml-64': !isCollapsed,
            'lg:ml-20': isCollapsed
        }">

        <div class="min-h-screen">
            <!-- Top Navigation Spacer for Desktop -->
            <div class="hidden lg:block h-20"></div>
            <!-- Content Area -->

            <div class="p-6 md:p-12">
                <div class="bg-black text-white rounded-lg space-y-6">
                    <!-- Header -->
                    <div class="flex items-center justify-between">
                        <h2 class="text-lg font-semibold flex items-center">
                            My Referrals
                            <img src="{{ asset('/assets/templates/pandel/images/loudspeaker-icon.svg') }}" alt="icon"
                                class="ml-2" />
                        </h2>
                    </div>

                    <!-- Referral Code and Total Referrals -->
                    <div
                        class="bg-gray-800 p-4 md:py-10 md:px-6 rounded flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
                        <div class="w-full sm:w-auto">
                            <span class="text-sm text-gray-400">Your Referral Code</span>
                            <div class="mt-2 flex items-center bg-gray-700 rounded-lg px-3 py-2">
                                <span class="text-sm text-white truncate clipboard"
                                    data-copy="{{ route('user.register', ['ref' => user()->username ?? 'notset']) }}">
                                    {{ route('user.register', ['ref' => user()->username ?? 'notset']) }}
                                </span>
                                <button class="ml-2">
                                    <img src="{{ asset('/assets/templates/pandel/images/copy-icon.svg') }}" alt="copy icon"
                                        class="h-4 w-4 text-white clipboard"
                                        data-copy="{{ route('user.register', ['ref' => user()->username ?? 'notset']) }}" />
                                </button>
                            </div>
                        </div>
                        <div class="text-center w-full sm:w-auto">
                            <span class="text-sm text-gray-400">Total Referrals</span>
                            <div class="mt-2 border border-gray-600 px-4 py-2 rounded-lg text-lg font-semibold">
                                {{ user()->referredUsers->count() }}
                            </div>
                        </div>
                    </div>

                    <!-- Referral Tree -->

                    @php
                        function displayReferralTree($user, $level = 0, $maxLevels = 10)
                        {
                            if ($level >= $maxLevels) {
                                return;
                            }

                            $referredUsers = $user->referredUsers;

                            if ($referredUsers->count() > 0) {
                                echo '<div class="ml-4">'; // Adds indentation for nested elements

                                foreach ($referredUsers as $referredUser) {
                                    echo "
                                        <div>
                                            <div class='flex items-center border-b border-gray-600 py-4 px-4 rounded bg-gradient-to-r from-blue-400/10 to-transparent mb-2'>
                                                <img src='" .
                                        asset('storage/profile/' . $referredUser->photo) .
                                        "' class='h-6 w-6 rounded-full mr-3' />
                                                <span class='text-sm text-white'>" .
                                        $referredUser->username .
                                        "</span>
                                            </div>
                                        </div>
                                    ";
                                    displayReferralTree($referredUser, $level + 1, $maxLevels);
                                }

                                echo '</div>';
                            }
                        }
                    @endphp
                    <div>
                        <div class="bg-gray-800 p-4 md:px-6 rounded-lg space-y-2">
                            <h3 class="text-sm text-gray-400 mb-2 border-b border-gray-600 py-4">
                                My Referral Tree
                            </h3>

                            @php
                                displayReferralTree(user());
                            @endphp

                        </div>
                    </div>
                </div>
            </div>


        </div>


        <footer>
            <div class="mt-8 text-center text-sm text-sky-400 mb-4">
                All Rights Operational
            </div>
        </footer>


    </div>
@endsection
