@extends("cabinet.base")
@section("title", "Рефералы")
@section("content")
    <style>
        .cabinet-card .grid-cols-4 > div {
            min-width: 0;
            word-break: break-word;
        }
    </style>
    <section class="w-full px-4 md:px-10 mt-20 max-md:mt-10">
        <!-- Cards -->
        <div class="flex flex-wrap gap-5 justify-center mb-12">
            <!-- Total Referrals -->
            <div
                class="cabinet-card flex flex-col items-center px-6 py-6 w-full sm:w-[45%] lg:w-[21%] rounded-[30px] shadow-[10px_12px_4px_rgba(0,0,0,0.25)]">
                <h3 class="text-lg font-bold tracking-widest">Всего рефералов</h3>
                <p class="mt-6 text-xl tracking-wider">{{ $totalReferrals ?? "Нет рефералов" }}</p>
            </div>

            <!-- Earnings -->
            <div
                class="cabinet-card flex flex-col items-center px-6 py-6 w-full sm:w-[45%] lg:w-[24%] rounded-[30px] shadow-[10px_12px_4px_rgba(0,0,0,0.25)]">
                <h3 class="text-lg font-bold tracking-widest">Получено от рефералов</h3>
                <p class="mt-6 text-xl tracking-wider">{{ $totalEarnings }} RUB</p>
            </div>

            <!-- Partnership Levels -->
            <div
                class="cabinet-card flex flex-col items-center px-6 py-6 w-full sm:w-[45%] lg:w-[23%] rounded-[30px] shadow-[10px_12px_4px_rgba(0,0,0,0.25)]">
                <h3 class="text-lg font-bold tracking-widest">Партнерская програма</h3>
                <p class="mt-6 text-xl tracking-wider">10%, 5%, 3%</p>
            </div>

            <!-- Referral Link -->
            <div
                class="cabinet-card flex flex-col px-6 py-6 w-full sm:w-[45%] lg:w-[32%] rounded-[30px] shadow-[10px_12px_4px_rgba(0,0,0,0.25)]">
                <h3 class="text-lg font-bold text-center tracking-widest">Реферальная ссылка</h3>
                <div class="flex items-center mt-6 p-3 bg-green-200 rounded-[30px]">
                    <p class="flex-grow text-sm sm:text-base tracking-wider truncate">{{ config("app.url") }}/auth/register?ref={{ $user->ref_code }}</p>
                    <button id="copyButton" class="ml-3 bg-white p-2 rounded-full">
                        <img
                            src="https://cdn.builder.io/api/v1/image/assets/TEMP/b9d473144679aa8b77f7935fb8ea27ffcf2feab2?placeholderIfAbsent=true&apiKey=849ba896f59940849f13fd50b0edecfa"
                            alt="Copy" class="w-5 h-5">
                    </button>
                </div>
            </div>
        </div>

        <!-- Referrals Table -->
        <section
            class="cabinet-card flex flex-col py-6 px-4 sm:px-8 text-black rounded-[30px] shadow-[10px_12px_4px_rgba(0,0,0,0.25)]">
            <h2 class="text-2xl font-bold text-center tracking-wider mb-6">Ваши рефералы</h2>

            <!-- Table Header -->
            <div
                class="grid grid-cols-4 gap-4 font-semibold bg-green-200 py-3 px-4 rounded-t-lg text-center text-sm sm:text-base">
                <div>Логин</div>
                <div>Дата</div>
                <div>Пополнение</div>
                <div>Реферальные</div>
            </div>

            <!-- Level 1 -->
            <div class="py-2 px-4 bg-white text-sm sm:text-base font-semibold">Рефералы 1 уровня</div>
            @forelse ($level1 as $ref)
                <div class="grid grid-cols-4 gap-4 items-center py-4 px-4 border-b text-center text-sm sm:text-base">
                    <div>{{ $ref->name }}</div>
                    <div>{{ $ref->created_at->format('d.m.Y') }}</div>
                    <div>{{ number_format($ref->balance, 2, '.', ' ') }} RUB</div>
                    <div>{{ number_format($ref->balance * 0.10, 2, '.', ' ') }} RUB</div>
                </div>
            @empty
                <div class="py-4 px-4 text-gray-500 text-center text-sm">Нет данных</div>
            @endforelse

            <!-- Level 2 -->
            <div class="py-2 px-4 bg-white text-sm sm:text-base font-semibold">Рефералы 2 уровня</div>
            @forelse ($level2 as $ref)
                <div class="grid grid-cols-4 gap-4 items-center py-4 px-4 border-b text-center text-sm sm:text-base">
                    <div>{{ $ref->name }}</div>
                    <div>{{ $ref->created_at->format('d.m.Y') }}</div>
                    <div>{{ number_format($ref->balance, 2, '.', ' ') }} RUB</div>
                    <div>{{ number_format($ref->balance * 0.05, 2, '.', ' ') }} RUB</div>
                </div>
            @empty
                <div class="py-4 px-4 text-gray-500 text-center text-sm">Нет данных</div>
            @endforelse

            <!-- Level 3 -->
            <div class="py-2 px-4 bg-white text-sm sm:text-base font-semibold">Рефералы 3 уровня</div>
            @forelse ($level3 as $ref)
                <div class="grid grid-cols-4 gap-4 items-center py-4 px-4 border-b text-center text-sm sm:text-base">
                    <div>{{ $ref->name }}</div>
                    <div>{{ $ref->created_at->format('d.m.Y') }}</div>
                    <div>{{ number_format($ref->balance, 2, '.', ' ') }} RUB</div>
                    <div>{{ number_format($ref->balance * 0.03, 2, '.', ' ') }} RUB</div>
                </div>
            @empty
                <div class="py-4 px-4 text-gray-500 text-center text-sm">Нет данных</div>
            @endforelse
        </section>
    </section>
@endsection
<script>
    document.addEventListener("DOMContentLoaded", function(){
        document.getElementById('copyButton')?.addEventListener('click', function () {
            const referralLink = "{{ config("app.url") }}/auth/register?ref={{ $user->ref_code }}";
            navigator.clipboard.writeText(referralLink).then(function () {
                alert('Ссылка скопирована!');
            }, function () {
                alert('Не удалось скопировать ссылку');
            });
        });
    });
</script>