@extends("cabinet.base")
@section("title", "Кабинет")
@section("content")
    <section class="cabinet-main-content w-full px-4 sm:px-6 lg:px-0">
        <div class="flex flex-col lg:flex-row gap-6 " data-el="div-1">
            <div class="container-stat-cards w-full lg:w-[30%] space-y-6">
                @php
                    $cards = [
                        ['title' => 'Инвестировано', 'amount' => number_format($invested, 2, '.', ' ') . ' RUB', 'icon' => 'c1fe34224bc965348c032d4d4b8815e7308b8f98'],
                        ['title' => 'Выплачено', 'amount' => number_format($withdrawn, 2, '.', ' ') . ' RUB', 'icon' => '22fa58d848332d8a0b497a690a75d510498cda6e'],
                        ['title' => 'Баланс', 'amount' => number_format($balance, 2, '.', ' ') . ' RUB', 'icon' => 'fb5d2f4ab62061562e7eb6302ed7b66be21c6191'],
                        ['title' => 'Рефералов', 'amount' => $referrals, 'icon' => '34b75af8fa837dd321fd7aed2ceed6178c9b7cb5'],
                    ];
                @endphp

                @foreach($cards as $card)
                    <article class="cabinet-card flex justify-between items-center gap-4 p-4 sm:p-5 rounded-2xl shadow-[0_4px_8px_rgba(0,0,0,0.15)] bg-white w-full overflow-hidden">
                        <div class="text-base sm:text-xl text-black tracking-[1px] w-2/3">
                            <h3 class="truncate">{{ $card['title'] }}</h3>
                            <p class="mt-2 break-words text-sm sm:text-base">{{ $card['amount'] }}</p>
                        </div>
                        <div class="flex items-center justify-center px-3 py-3 rounded-xl bg-gray-100 w-1/3 max-w-[56px]">
                            @if($card['icon'])
                                <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/{{ $card['icon'] }}?placeholderIfAbsent=true&apiKey=849ba896f59940849f13fd50b0edecfa"
                                     class="object-contain w-10 h-10" alt="icon">
                            @else
                                <div class="text-3xl font-bold">₽</div>
                            @endif
                        </div>
                    </article>
                @endforeach
            </div>

            <!-- Данные пользователя + реферальная ссылка -->
            <div class="w-full lg:w-[68%] flex flex-col gap-6">
                <section class="cabinet-card px-4 sm:px-6 py-5 rounded-2xl shadow-[0_4px_8px_rgba(0,0,0,0.15)] bg-white text-black w-full">
                    <h2 class="text-center text-xl sm:text-2xl font-bold tracking-[1.5px]">Ваши данные</h2>
                    <dl class="mt-6 sm:mt-10 space-y-4 sm:space-y-6 text-base sm:text-xl tracking-[1px]">
                        <div class="flex flex-wrap items-center gap-3">
                            <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/34b75af8fa837dd321fd7aed2ceed6178c9b7cb5" alt="Login" class="w-4 sm:w-5">
                            <dt class="font-semibold">Ваш логин:</dt>
                            <dd class="break-words">{{ $user->name }}</dd>
                        </div>
                        <div class="flex flex-wrap items-center gap-3">
                            <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/6fafafa3c8df7351b3edebb3174d824bd416cc38" alt="Email" class="w-4 sm:w-5">
                            <dt class="font-semibold">Ваш email:</dt>
                            <dd class="break-words w-full">{{ $user->email }}</dd>
                        </div>
                        <div class="flex flex-wrap items-center gap-3">
                            <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/6e01ec044f70bf1e0e25182b85e13794efa5f34c" alt="Referrer" class="w-4 sm:w-5">
                            <dt class="font-semibold">Вас пригласил:</dt>
                            <dd class="break-words">{{ $referral->name ?? "Нет реферала" }}</dd>
                        </div>
                    </dl>
                </section>

                <section class="cabinet-card flex flex-col items-center px-4 sm:px-6 py-5 rounded-2xl shadow-[0_4px_8px_rgba(0,0,0,0.15)] bg-white text-black">
                    <h2 class="text-xl sm:text-2xl font-bold tracking-[1.5px] text-center">Реферальная ссылка</h2>
                    <p class="mt-6 text-base sm:text-xl bg-gray-50 px-4 py-3 rounded-xl underline tracking-[1px] text-center break-words w-full">
                        {{ config("app.url") }}/auth/register?ref={{ $user->ref_code }}
                    </p>
                    <button class="flex items-center gap-2 px-4 py-2 mt-6 bg-green-200 rounded-xl w-fit text-base sm:text-lg" id="copyButton">
                        <span>Скопировать</span>
                        <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/d15295b86700af190b27b97ca516c236487544d2" alt="Copy" class="w-5 sm:w-6">
                    </button>
                </section>
            </div>
        </div>
    </section>

    <script>
        document.getElementById('copyButton')?.addEventListener('click', function () {
            const referralLink = "{{ config("app.url") }}/auth/register?ref={{ $user->ref_code }}";
            navigator.clipboard.writeText(referralLink).then(() => {
                alert('Ссылка скопирована!');
            }).catch(() => {
                alert('Не удалось скопировать ссылку');
            });
        });
    </script>
@endsection